:root {
  --ink: #172033;
  --muted: #718096;
  --line: #dce2ea;
  --panel: #f5f7fa;
  --number-col: 58px;
  --task-col: 322px;
  --start-col: 162px;
  --duration-col: 74px;
  --progress-col: 104px;
  --resources-col: 190px;
  --dependency-col: 140px;
  --actions-col: 42px;
  --row-h: 34px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #eef1f5;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 720px; background: #eef1f5; }
button, input, select { font: inherit; }
.app-shell { min-height: 100vh; background: white; }
.project-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: #fff; }
h1 { margin: 0 0 4px; font-size: 1.28rem; line-height: 1.25; letter-spacing: -.02em; }
.project-header p { margin: 0; color: #5c6678; font-size: .8rem; }
#dateRange { margin-left: 12px; color: #d78800; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.stats { display: flex; gap: 24px; }
.stats div { min-width: 58px; text-align: center; }
.stats strong { display: block; font: 700 1.15rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.stats span { display: block; margin-top: 1px; color: #8a93a5; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.completion-stat { min-width: 82px !important; }
.completion-stat i { display:block; width:82px; height:5px; margin-top:5px; border-radius:3px; overflow:hidden; background:#dce2ea; }
.completion-stat b { display:block; width:0; height:100%; background:#1f9d68; transition:width .2s ease; }
.toolbar { min-height: 57px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.search-wrap, .select-wrap { height: 34px; display: flex; align-items: center; background: #fff; border: 1px solid #d7dde6; border-radius: 6px; }
.search-wrap { width: 260px; padding: 0 9px; gap: 7px; color: #718096; }
.search-wrap input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .8rem; }
.select-wrap select { width: 190px; height: 100%; padding: 0 10px; border: 0; outline: 0; background: transparent; font-size: .8rem; }
button { height: 34px; padding: 0 11px; border: 1px solid #d4dae4; border-radius: 6px; background: #fff; color: #435066; cursor: pointer; font-size: .76rem; }
button:hover { background: #f8fafc; border-color: #aeb8c8; }
.primary-action { background:#172033; color:#fff; border-color:#172033; font-weight:650; }
.primary-action:hover { background:#27344a; border-color:#27344a; }
.undo-button:disabled { opacity:.45; cursor:not-allowed; background:#f3f5f8; }
.button-group, .zoom-control { display: flex; align-items: center; gap: 4px; }
.zoom-control span { min-width: 51px; text-align: center; color: #7b8493; font-size: .72rem; }
.check { display: flex; align-items: center; gap: 6px; margin-left: 4px; color: #5d687b; font-size: .76rem; white-space: nowrap; }
.check input { accent-color: #e69b00; }
.auto-schedule-badge { margin-left:auto; padding:5px 9px; border:1px solid #b8dfce; border-radius:999px; background:#edf9f4; color:#197554; font-size:.67rem; font-weight:650; white-space:nowrap; }
.shared-status { margin-left:auto; padding:5px 9px; border:1px solid #cfd6df; border-radius:999px; background:#fff; color:#526176; font-size:.67rem; font-weight:650; white-space:nowrap; }
.shared-status.saved { border-color:#b8dfce; background:#edf9f4; color:#197554; }.shared-status.syncing { border-color:#f2d28e; background:#fff8e7; color:#9a6500; }.shared-status.error { border-color:#edb2b2; background:#fff1f1; color:#a43d3d; }
.role-badge { padding:5px 8px; border-radius:999px; background:#172033; color:#fff; font-size:.62rem; font-weight:750; text-transform:uppercase; letter-spacing:.05em; }
.editor-error { margin:0 0 12px; padding:9px 10px; border:1px solid #edb2b2; border-radius:6px; background:#fff1f1; color:#a43d3d; font-size:.72rem; }
.notification-count { display:inline-flex; min-width:17px; height:17px; margin-left:4px; align-items:center; justify-content:center; border-radius:999px; background:#c34d4d; color:#fff; font-size:.58rem; }
.notification-count[hidden] { display:none; }
.legend { display: flex; gap: 13px; align-items: center; overflow-x: auto; padding: 8px 20px; border-bottom: 1px solid var(--line); background: #f7f8fa; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; flex: none; color: #677286; font-size: .69rem; }
.swatch { width: 9px; height: 9px; border-radius: 2px; }
.gantt-frame { position: relative; height: calc(100vh - 190px); min-height: 470px; overflow: auto; background: #fff; }
.gantt { position: relative; min-width: 100%; }
.gantt-grid { display: grid; position: relative; min-width: max-content; }
.corner, .timeline-header { position: sticky; top: 0; z-index: 12; height: 76px; background: #eef1f5; border-bottom: 1px solid #cfd6df; }
.corner { left: 0; display: grid; grid-template-columns: var(--number-col) var(--task-col) var(--start-col) var(--duration-col) var(--progress-col) var(--resources-col) var(--dependency-col) var(--actions-col); z-index: 15; border-right: 1px solid #cfd6df; }
.corner span { display: flex; align-items: center; padding: 0 10px; color: #8a94a6; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; }
.corner span:nth-child(1) { justify-content: center; padding:0 4px; }
.corner span:nth-child(2),.corner span:nth-child(3),.corner span:nth-child(6),.corner span:nth-child(7) { justify-content: flex-start; }
.corner span:nth-child(4) { justify-content: flex-end; }
.corner span:nth-child(5) { justify-content: center; }
.corner span:last-child { justify-content: center; }
.timeline-header { display: flex; overflow: hidden; }
.day-head { flex: none; height: 76px; padding: 5px 0 0; border-right: 1px solid #cbd3de; }
.day-head strong { display: block; font: 500 .68rem ui-monospace, SFMono-Regular, Menlo, monospace; color: #46546b; }
.day-head > strong,.day-head > span { padding-left:8px; }.day-head > span { display:block; margin-top:2px; font-size:.52rem; color:#8b96a9; text-transform:uppercase; }
.shift-band { display:flex; height:18px; margin-top:3px; border-top:1px solid #d5dce5; overflow:hidden; }.shift-part { display:flex; align-items:center; justify-content:center; min-width:0; border-right:1px solid #cbd3de; color:#667287; font-size:.46rem; font-weight:700; white-space:nowrap; overflow:hidden; }.shift-part.night { background:#d9dee6; color:#455166; }.shift-part.day { background:#fff; color:#667287; }.shift-boundaries { position:relative; height:12px; color:#68758a; font:500 .43rem ui-monospace,SFMono-Regular,Menlo,monospace; }.shift-boundaries span { position:absolute; top:1px; transform:translateX(-50%); }.shift-boundaries span:first-child { left:27.083%; }.shift-boundaries span:last-child { left:77.083%; }
.label-cell { position: sticky; left: 0; z-index: 8; display: grid; grid-template-columns: var(--number-col) var(--task-col) var(--start-col) var(--duration-col) var(--progress-col) var(--resources-col) var(--dependency-col) var(--actions-col); min-height: var(--row-h); background: white; border-bottom: 1px solid #e0e5ec; border-right: 1px solid #d1d8e2; }
.label-cell.phase { background: #eef1f5; font-weight: 650; }
.task-number { display:flex; align-items:center; justify-content:center; gap:3px; border-right:1px solid #e6eaf0; color:#68758a; font:600 .66rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.task-row .task-number { cursor:grab; user-select:none; }
.task-row .task-number:active { cursor:grabbing; }
.task-number b { min-width:18px; font:inherit; text-align:center; }
.drag-grip { color:#a2acba; font-style:normal; font-size:.78rem; line-height:1; }
.task-row.row-dragging { opacity:.48; }
.task-row.drop-before::before,.task-row.drop-after::after { content:""; position:absolute; left:0; right:0; z-index:20; height:3px; background:#e69b00; pointer-events:none; }
.task-row.drop-before::before { top:-2px; }
.task-row.drop-after::after { bottom:-2px; }
.task-name { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-name.child { padding-left: 34px; }
.task-name.grandchild { padding-left: 52px; }
.toggle { width: 15px; height: 22px; padding: 0; border: 0; background: transparent; font-size: .65rem; }
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.duration { display: flex; align-items: center; justify-content: flex-end; padding: 0 12px 0 4px; color: #42516a; font: .67rem ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.duration input { width:60px; height:25px; padding:0 5px; border:1px solid #cfd6df; border-radius:5px; text-align:right; font:inherit; color:#334155; }
.start-time { display:flex; align-items:center; padding:0 7px; border-left:1px solid #e6eaf0; color:#526176; font-size:.6rem; white-space:nowrap; overflow:hidden; }
.start-time input { width:148px; height:25px; padding:0 4px; border:1px solid #cfd6df; border-radius:5px; background:#fff; color:#334155; font-size:.61rem; }
.completion { display:flex; align-items:center; justify-content:center; padding:0 7px; border-left:1px solid #e6eaf0; }
.completion select { width:82px; height:25px; border:1px solid #cfd6df; border-radius:5px; padding:0 5px; background:#fff; color:#334155; font-size:.69rem; cursor:pointer; }
.completion output { font:600 .69rem ui-monospace,SFMono-Regular,Menlo,monospace; color:#526176; }
.resource-cell { min-width:0; display:flex; align-items:center; padding:0 10px; border-left:1px solid #e6eaf0; color:#526176; font-size:.66rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dependency-cell { min-width:0; display:flex; align-items:center; padding:0 6px; border-left:1px solid #e6eaf0; color:#526176; font-size:.66rem; overflow:hidden; }
.dependency-edit { width:100%; height:25px; padding:0 6px; overflow:hidden; border-color:#d6dce5; color:#4d5d73; text-align:left; text-overflow:ellipsis; white-space:nowrap; font-size:.64rem; }
.dependency-edit:hover { border-color:#8090a8; background:#f7f9fc; }
.dependency-list { max-height:360px; overflow:auto; border:1px solid #dce2ea; border-radius:7px; background:#f9fafc; }
.dependency-option { display:flex !important; grid-template-columns:none !important; align-items:center; gap:9px !important; margin:0 !important; padding:9px 10px; border-bottom:1px solid #e5e9ef; cursor:pointer; }
.dependency-option:last-child { border-bottom:0; }
.dependency-option:hover { background:#fff; }
.dependency-option input { width:16px !important; height:16px !important; flex:none; accent-color:#e69b00; }
.dependency-option span { min-width:0; }
.dependency-option strong,.dependency-option small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dependency-option strong { color:#334155; font-size:.72rem; }
.dependency-option small { margin-top:2px; color:#8490a3; font-size:.62rem; font-weight:400; }
.dependency-note { margin:10px 0 0; color:#718096; font-size:.68rem; line-height:1.45; }
.dependency-empty { margin:0; padding:18px; color:#718096; text-align:center; font-size:.72rem; }
.row-actions { display:flex; align-items:center; justify-content:center; border-left:1px solid #e6eaf0; }
.delete-job { width:28px; height:26px; padding:0; border:0; color:#a54848; background:transparent; font-size:1rem; }
.delete-job:hover { background:#fff0f0; border:0; }
.job-dialog { width:min(570px,calc(100vw - 32px)); padding:0; border:0; border-radius:12px; box-shadow:0 24px 70px rgba(15,23,42,.34); }
.job-dialog::backdrop { background:rgba(15,23,42,.45); backdrop-filter:blur(2px); }
.report-dialog { width:min(1160px,calc(100vw - 28px)); max-height:calc(100vh - 28px); padding:0; border:0; border-radius:12px; background:#eef1f5; box-shadow:0 24px 80px rgba(15,23,42,.38); }
.report-dialog::backdrop { background:rgba(15,23,42,.48); backdrop-filter:blur(2px); }
#progressReport { padding:26px; color:#172033; }
.report-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:18px; }
.eyebrow { margin:0 0 5px !important; color:#718096; font-size:.65rem !important; font-weight:750; letter-spacing:.13em; }
.report-head h2 { margin:0; font-size:1.45rem; }
.report-head p { margin:5px 0 0; color:#718096; font-size:.78rem; }
.report-controls { display:flex; align-items:center; gap:8px; }
.report-controls label { display:flex; align-items:center; gap:7px; color:#5f6b7d; font-size:.72rem; }
.report-controls input { height:34px; padding:0 8px; border:1px solid #cfd6df; border-radius:6px; }
.report-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:12px; }
.report-kpi { padding:14px 15px; border:1px solid #dce2ea; border-radius:9px; background:#fff; }
.report-kpi span { display:block; color:#788397; font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; }
.report-kpi strong { display:block; margin-top:5px; font:700 1.15rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.report-kpi strong.positive { color:#14855c; }.report-kpi strong.negative { color:#b14747; }
.report-chart-card,.report-table-card,.report-comments-card { margin-top:12px; padding:17px; border:1px solid #dce2ea; border-radius:9px; background:#fff; }
.chart-title,.report-table-card>div { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.chart-title h3,.report-table-card h3 { margin:0; font-size:.9rem; }.chart-title p,.report-table-card p { margin:3px 0 0; color:#7b8698; font-size:.69rem; }
.chart-legend { display:flex; gap:15px; color:#5f6b7d; font-size:.69rem; }.chart-legend span { display:flex; align-items:center; gap:6px; }.chart-legend i { width:20px; height:3px; border-radius:2px; }.planned-key { background:#8090a8; }.actual-key { background:#e59b13; }
.progress-chart { width:100%; overflow:hidden; margin-top:8px; }.progress-chart svg { display:block; width:100%; height:auto; min-height:300px; }
.report-table-card table { width:100%; margin-top:13px; border-collapse:collapse; font-size:.72rem; }.report-table-card th { padding:8px; text-align:right; color:#758095; border-bottom:1px solid #dce2ea; font-size:.63rem; text-transform:uppercase; letter-spacing:.05em; }.report-table-card th:first-child,.report-table-card td:first-child { text-align:left; }.report-table-card td { padding:8px; text-align:right; border-bottom:1px solid #edf0f4; }.variance-positive { color:#14855c; font-weight:700; }.variance-negative { color:#b14747; font-weight:700; }
.comments-title h3 { margin:0; font-size:.9rem; }.comments-title p { margin:3px 0 0; color:#7b8698; font-size:.69rem; }
.report-comments { display:grid; gap:8px; margin-top:13px; }.comment-entry { position:relative; display:grid; grid-template-columns:96px 145px 1fr; gap:12px; align-items:start; padding:11px 38px 11px 12px; border:1px solid #e2e7ee; border-left:4px solid #8090a8; border-radius:7px; background:#fbfcfd; }.comment-entry.positive { border-left-color:#1f9d68; }.comment-entry.issue { border-left-color:#c34d4d; }.comment-entry.decision { border-left-color:#6d79bd; }.comment-meta { color:#7b8698; font-size:.65rem; line-height:1.45; }.comment-entry strong { display:block; margin-bottom:3px; font-size:.75rem; }.comment-entry p { margin:0; color:#526176; font-size:.7rem; line-height:1.45; white-space:pre-wrap; }.comment-type { display:inline-block; padding:3px 6px; border-radius:999px; background:#edf1f5; color:#526176; font-size:.59rem; font-weight:700; text-transform:uppercase; }.comment-delete { position:absolute; top:7px; right:7px; width:25px; height:25px; padding:0; border:0; color:#a54848; background:transparent; }.empty-comments { padding:16px; border:1px dashed #d5dce5; border-radius:7px; color:#7b8698; text-align:center; font-size:.7rem; }
.report-note { margin-top:11px; color:#7b8698; font-size:.64rem; line-height:1.45; }
@media print {
  @page { size:landscape; margin:10mm; }
  body { min-width:0; background:#fff; }
  .app-shell,.tooltip,.job-dialog { display:none !important; }
  .report-dialog { position:static; display:block !important; width:100%; max-height:none; margin:0; padding:0; border-radius:0; box-shadow:none; background:#fff; }
  .report-dialog::backdrop,.report-controls { display:none; }
  #progressReport { padding:0; }
  .report-chart-card,.report-table-card,.report-comments-card,.report-kpi,.comment-entry { break-inside:avoid; }
  .comment-delete { display:none; }
  .progress-chart svg { min-height:250px; }
}
.job-dialog form { padding:22px; }
.dialog-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
.dialog-head h2 { margin:0; font-size:1.15rem; }
.dialog-head p { margin:4px 0 0; color:#718096; font-size:.78rem; }
.icon-button { width:32px; padding:0; font-size:1.2rem; }
.job-dialog label { display:grid; gap:6px; margin-bottom:14px; color:#4a5568; font-size:.74rem; font-weight:650; }
.job-dialog input,.job-dialog select { width:100%; height:38px; padding:0 10px; border:1px solid #cfd6df; border-radius:6px; background:#fff; color:#172033; font-size:.8rem; font-weight:400; }
.job-dialog textarea { width:100%; padding:9px 10px; border:1px solid #cfd6df; border-radius:6px; resize:vertical; color:#172033; font:400 .8rem/1.45 inherit; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
.timeline-cell { position: relative; min-height: var(--row-h); border-bottom: 1px solid #e0e5ec; background-color: #fff; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--day-width) - 1px), #dfe4eb calc(var(--day-width) - 1px), #dfe4eb var(--day-width)); }
.timeline-cell::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(41,50,66,.085) 0 27.083%, transparent 27.083% 77.083%, rgba(41,50,66,.085) 77.083% 100%); background-size:var(--day-width) 100%; background-repeat:repeat-x; }
.gantt.no-night .timeline-cell::after { display: none; }
.timeline-cell.phase { background-color: #f7f8fa; }
.bar { position: absolute; top: 9px; height: 16px; min-width: 3px; border-radius: 4px; color: #172033; overflow: hidden; padding: 1px 6px; font-size: .62rem; line-height: 14px; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; box-shadow: inset 0 -1px rgba(0,0,0,.12); z-index: 3; }
.bar.draggable { cursor:grab; touch-action:none; }
.bar.locked { cursor:default; }
.bar.draggable:active,.bar.dragging { cursor:grabbing; filter:brightness(1.06); box-shadow:0 3px 9px rgba(15,23,42,.25),inset 0 -1px rgba(0,0,0,.12); z-index:7; }
.bar > span { position:relative; z-index:2; }
.bar-progress { position:absolute; inset:0 auto 0 0; background:rgba(255,255,255,.34); border-right:1px solid rgba(255,255,255,.75); z-index:1; }
.bar.phase-bar { opacity: .62; top: 10px; height: 14px; }
.bar.night { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.24) 0 2px, transparent 2px 6px); }
.gantt.no-night .bar.night { background-image: none; }
.dependency-layer { position: absolute; z-index: 5; pointer-events: none; overflow: visible; }
.dependency-layer path { fill: none; stroke: #5f6e84; stroke-width: 1.25; opacity: .72; marker-end: url(#arrow); }
.empty-state { padding: 48px; text-align: center; color: #728096; }
.tooltip { position: fixed; z-index: 100; max-width: 310px; padding: 10px 12px; border-radius: 7px; background: #172033; color: #fff; box-shadow: 0 8px 30px rgba(15,23,42,.25); pointer-events: none; font-size: .74rem; line-height: 1.45; }
.tooltip strong { display: block; margin-bottom: 3px; font-size: .78rem; }
.tooltip span { display: block; color: #cbd5e1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.viewer-mode .task-row .task-number { cursor:default; }.viewer-mode .delete-job,.viewer-mode .dependency-edit { opacity:.55; }
.shared-dialog { width:min(760px,calc(100vw - 32px)); }
.shared-dialog>section { padding:22px; }
.member-form { display:grid; grid-template-columns:1fr 130px auto; gap:8px; margin-bottom:14px; }
.member-form input,.member-form select { height:36px; padding:0 9px; border:1px solid #cfd6df; border-radius:6px; background:#fff; color:#334155; font-size:.75rem; }
.member-list,.activity-list { display:grid; max-height:430px; overflow:auto; border:1px solid #dce2ea; border-radius:8px; }
.member-list article,.activity-list article { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:50px; padding:9px 11px; border-bottom:1px solid #e8ecf1; background:#fff; }
.member-list article:last-child,.activity-list article:last-child { border-bottom:0; }
.member-list article>div,.activity-list article>div:first-child { min-width:0; flex:1; }.member-list strong,.activity-list strong { display:block; overflow:hidden; color:#334155; font-size:.74rem; text-overflow:ellipsis; white-space:nowrap; }.member-list span,.activity-list span { display:block; margin-top:2px; color:#7b8698; font-size:.64rem; }
.member-role { flex:none; padding:3px 7px; border-radius:999px; background:#eef1f5; color:#526176!important; font-weight:700; text-transform:uppercase; }
.remove-member { width:26px; height:26px; padding:0; border:0; color:#a54848; font-size:1rem; }
.activity-dialog { width:min(820px,calc(100vw - 32px)); }.activity-tabs { display:flex; gap:5px; margin-bottom:10px; }.activity-tabs button.active { border-color:#172033; background:#172033; color:#fff; }
.activity-list article>div:last-child { display:flex; align-items:center; gap:7px; flex:none; }.activity-list b { color:#526176; font:.67rem ui-monospace,SFMono-Regular,Menlo,monospace; }.restore-version { height:27px; padding:0 8px; font-size:.65rem; }
.shared-empty { margin:0; padding:20px; color:#7b8698; text-align:center; font-size:.72rem; }
.shared-toast { position:fixed; right:18px; bottom:18px; z-index:200; max-width:410px; padding:11px 14px; border-radius:8px; background:#172033; color:#fff; box-shadow:0 12px 34px rgba(15,23,42,.28); font-size:.74rem; line-height:1.4; }
@media (max-width:760px){.member-form{grid-template-columns:1fr}.shared-status{margin-left:0}}
@media (max-width: 980px) {
  .project-header { align-items: flex-start; }
  .stats { gap: 14px; }
  :root { --task-col: 270px; }
}
.date-control { height:34px; display:flex; align-items:center; gap:8px; padding:0 9px; border:1px solid #d7dde6; border-radius:6px; background:#fff; color:#5d687b; font-size:.74rem; white-space:nowrap; }
.date-control input { border:0; outline:0; color:var(--ink); background:transparent; font-size:.76rem; }