:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --ink: #1a2a3a;
  --muted: #64748b;
  --line: #dbe5f0;
  --accent: #0ea5a1;
  --accent-2: #3b82f6;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 20% 20%, #d8ecff 0, transparent 35%), radial-gradient(circle at 80% 0, #dbfff8 0, transparent 30%), var(--bg);
}
.bg-orb { position: fixed; border-radius: 999px; filter: blur(45px); z-index: -1; }
.orb-1 { width: 300px; height: 300px; top: -80px; left: -100px; background: #93c5fd66; }
.orb-2 { width: 260px; height: 260px; right: -90px; bottom: -80px; background: #2dd4bf55; }
.app-shell { max-width: 1280px; margin: 24px auto; padding: 0 16px 28px; }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hero h1 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.hero p { margin: 8px 0 0; color: var(--muted); }
.upload-btn {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.upload-btn:disabled { opacity: 0.7; cursor: wait; }
.source-info { margin-top: 10px; min-height: 28px; }
.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e6f4ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.86rem;
  font-weight: 600;
  transition: background 160ms ease;
}
.source-chip:hover { background: #dbeafe; }
.chip-clear-btn {
  border: 0;
  background: transparent;
  color: #1d4ed8;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease;
}
.source-chip:hover .chip-clear-btn { opacity: 1; }
.chip-clear-btn:hover { background: rgba(37, 99, 235, 0.15); }
.meta { margin-top: 12px; font-size: 0.9rem; color: #0f766e; font-weight: 600; }
.hidden { display: none !important; }
.starter-screen { margin-top: 18px; }
.starter-card {
  border: 1px solid var(--line);
  background: linear-gradient(165deg, #ffffff, #f3fbff);
  border-radius: 18px;
  padding: 34px 26px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  text-align: center;
}
.starter-card h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}
.starter-card p {
  max-width: 720px;
  margin: 10px auto 0;
  color: var(--muted);
}
.starter-btn { margin-top: 18px; padding: 12px 18px; font-size: 0.95rem; }
.tab-switcher { margin-top: 16px; display: flex; gap: 10px; }
.tab-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 14px;
  font-weight: 600;
  cursor: pointer;
}
.tab-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); margin-top: 16px; overflow: hidden; }
.tasks-panel h2, .gantt-panel h2 { margin: 0; padding: 16px 20px; font-family: "Space Grotesk", sans-serif; }
.tasks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.tasks-actions { position: relative; padding-right: 16px; }
.icon-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: #334155;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
}
.icon-btn:hover { background: #f8fbff; }
.tasks-menu {
  position: absolute;
  right: 0;
  top: 42px;
  z-index: 20;
  width: 150px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
  overflow: hidden;
}
.tasks-menu-item {
  width: 100%;
  border: 0;
  text-align: left;
  background: #fff;
  padding: 10px 12px;
  font-size: 0.9rem;
  cursor: pointer;
}
.tasks-menu-item:hover { background: #f8fbff; }
.table-wrap { max-height: 360px; overflow: auto; border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { padding: 10px 12px; border-bottom: 1px solid #eef3f9; text-align: left; }
thead th { position: sticky; top: 0; background: #f8fbff; z-index: 1; }
tr.summary { background: #f0f9ff; font-weight: 600; }
.hidden-row { display: none; }
.task-cell { display: inline-flex; align-items: center; gap: 6px; }
.row-toggle {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #0f172a;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}
.row-toggle:hover { background: rgba(15, 23, 42, 0.08); }
.row-toggle-spacer { width: 18px; height: 18px; display: inline-block; }
.gantt-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.toolbar { padding-right: 16px; display: flex; align-items: center; gap: 12px; }
.view-buttons { padding-right: 16px; display: flex; gap: 8px; }
.view-buttons button { border: 1px solid var(--line); background: #fff; padding: 7px 11px; border-radius: 10px; cursor: pointer; }
.view-buttons button.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; }
.zoom-controls { display: flex; align-items: center; gap: 8px; }
.zoom-controls button { border: 1px solid var(--line); background: #fff; width: 30px; height: 30px; border-radius: 8px; font-size: 1rem; cursor: pointer; }
#zoomLevel { min-width: 48px; text-align: center; font-weight: 600; color: var(--muted); }
.gantt-wrap { overflow: auto; padding: 14px; }
.gantt .bar { fill: #64748b; }
.gantt .bar-progress { fill: #334155; }
.gantt .bar-label { fill: #1e293b; font-weight: 600; }
/* Improve header readability at low zoom by suppressing secondary wrapped lower-header line */
.gantt .lower-text tspan:nth-child(n + 2) { display: none; }
/* Extra compact mode for low-zoom week view */
.gantt-wrap.compact-week .grid-header text { font-size: 12px; }
.gantt-wrap.compact-week .lower-header .lower-text:nth-child(even) { display: none; }
.gantt-wrap.compact-week .upper-header text { font-size: 11px; }
.gantt-wrap.compact-week .lower-header { height: 20px; overflow: hidden; }
.gantt-wrap.compact-week .lower-header text,
.gantt-wrap.compact-week .lower-header tspan { font-size: 10px !important; }
.gantt-wrap.compact-week .current-upper text,
.gantt-wrap.compact-week .current-lower text { font-size: 10px !important; dominant-baseline: middle; }
.gantt-wrap.compact-week .bar-label { display: none; }
/* Dense week mode applies at <= 90% zoom to prevent overflow around headers and top rows */
.gantt-wrap.dense-week .bar-label { display: none; }

.gantt .bar-wrapper.phase-1 .bar { fill: #2563eb; }
.gantt .bar-wrapper.phase-1 .bar-progress { fill: #1d4ed8; }
.gantt .bar-wrapper.phase-2 .bar { fill: #0891b2; }
.gantt .bar-wrapper.phase-2 .bar-progress { fill: #0e7490; }
.gantt .bar-wrapper.phase-3 .bar { fill: #16a34a; }
.gantt .bar-wrapper.phase-3 .bar-progress { fill: #15803d; }
.gantt .bar-wrapper.phase-4 .bar { fill: #ca8a04; }
.gantt .bar-wrapper.phase-4 .bar-progress { fill: #a16207; }
.gantt .bar-wrapper.phase-5 .bar { fill: #ea580c; }
.gantt .bar-wrapper.phase-5 .bar-progress { fill: #c2410c; }
.gantt .bar-wrapper.phase-6 .bar { fill: #dc2626; }
.gantt .bar-wrapper.phase-6 .bar-progress { fill: #b91c1c; }
.gantt .bar-wrapper.phase-7 .bar { fill: #7c3aed; }
.gantt .bar-wrapper.phase-7 .bar-progress { fill: #6d28d9; }
.gantt .bar-wrapper.phase-8 .bar { fill: #db2777; }
.gantt .bar-wrapper.phase-8 .bar-progress { fill: #be185d; }

.kpi-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.kpi-card {
  background: linear-gradient(160deg, #ffffff, #f6fbff);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.kpi-card p { margin: 0; color: var(--muted); font-size: 0.85rem; }
.kpi-card h3 { margin: 8px 0 0; font-family: "Space Grotesk", sans-serif; font-size: 1.5rem; }
.analysis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.chart-panel h2 { margin: 0; padding: 16px 20px; font-family: "Space Grotesk", sans-serif; border-bottom: 1px solid var(--line); }
.chart-wrap { padding: 14px; height: 340px; }
.wide-panel .chart-wrap { height: 320px; }
@media (max-width: 768px) {
  .app-shell { margin-top: 14px; }
  .hero-top { align-items: flex-start; flex-direction: column; }
  .table-wrap { max-height: 300px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analysis-grid { grid-template-columns: 1fr; }
}