:root {
  --ink: #1c1f26; --muted: #667085; --faint: #98a1b0; --line: #e6e9ee; --line2: #eef0f3;
  --bg: #f5f7fa; --card: #fff;
  --blue: oklch(0.56 0.19 258); --teal: oklch(0.68 0.13 195);
  --green: oklch(0.62 0.14 150); --amber: oklch(0.74 0.14 75); --red: oklch(0.6 0.2 25); --gold: oklch(0.78 0.15 85);
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --row: 30px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 13px/1.45 var(--font-ui); color: var(--ink); background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue); }

/* ---- shell ---- */
.top { display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: #16181d; color: #fff; flex-wrap: wrap; position: relative; }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--blue), var(--teal)); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.mark { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 800 15px var(--font-ui); background: linear-gradient(135deg, var(--blue), var(--teal)); flex: 0 0 auto; }
.pname { font: 700 14px/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.psub { font: 400 11px/1.3 var(--font-ui); color: rgba(255,255,255,.6); }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.tabs button { background: none; border: 0; color: rgba(255,255,255,.7); padding: 7px 12px; border-radius: 7px; cursor: pointer; font-weight: 600; }
.tabs button:hover { background: rgba(255,255,255,.08); color: #fff; }
.tabs button.on { background: rgba(255,255,255,.14); color: #fff; }
.sync { margin-left: auto; font: 500 11.5px var(--font-ui); color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.sync.saving i { background: var(--amber); } .sync.offline i { background: var(--red); }
main { padding: 16px 20px 40px; }

/* ---- controls ---- */
.btn { background: #fff; border: 1px solid #d5dae1; border-radius: 7px; padding: 6px 11px; cursor: pointer; font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.btn:hover { border-color: var(--blue); color: var(--blue); }
.btn.primary { background: var(--blue); color: #fff; border-color: var(--blue); } .btn.primary:hover { color: #fff; filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger:hover { border-color: var(--red); color: var(--red); }
.seg { display: inline-flex; border: 1px solid #d5dae1; border-radius: 7px; overflow: hidden; background: #fff; }
.seg button { background: none; border: 0; padding: 6px 10px; cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--muted); }
.seg button.on { background: color-mix(in oklch, var(--blue) 12%, #fff); color: var(--blue); }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .grow { flex: 1; }
.toolbar label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; font-size: 12px; }
input[type=text], input[type=number], input[type=date], select, textarea {
  border: 1px solid transparent; background: transparent; border-radius: 5px; padding: 3px 5px; width: 100%; min-width: 0; height: 24px; }
td input:hover, td select:hover, .card input:hover, .card select:hover, .card textarea:hover { border-color: #d5dae1; background: #fff; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue) !important; background: #fff !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--blue) 16%, transparent); }
.card input[type=text], .card input[type=number], .card input[type=date], .card select { border-color: #d5dae1; background: #fff; height: 30px; padding: 4px 8px; }
textarea { height: auto; resize: vertical; }

/* ---- schedule: one scroll box, table + gantt side by side ---- */
.sched { display: flex; align-items: flex-start; overflow: auto; height: calc(100vh - 262px); min-height: 360px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
table.tl { border-collapse: separate; border-spacing: 0; flex: 0 0 auto; }
.tl th { position: sticky; top: 0; z-index: 4; height: 44px; background: #f0f2f6; font: 650 11px var(--font-ui); letter-spacing: .02em; color: var(--muted); text-align: left; padding: 0 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tl td { height: var(--row); padding: 0 4px; border-bottom: 1px solid var(--line2); white-space: nowrap; background: var(--rbg, #fff); }
.tl tr.r-phase td { background: var(--rbg, #eef3fb); font-weight: 650; } .tl tr.r-project td { background: var(--rbg, #e2e9f4); font-weight: 700; }
.tl tr.sel td { box-shadow: inset 0 0 0 999px rgba(59, 110, 240, .10); }
.tl tr.sel td.c-name { box-shadow: 2px 0 0 var(--line), inset 0 0 0 999px rgba(59, 110, 240, .10); }
.tl tr.cyc td { background: #fdecec; }
.tl tr.r-milestone { color: oklch(0.52 0.12 75); }
.zero { color: var(--red) !important; font-weight: 700; }
.tip { color: var(--faint); font-weight: 500; font-size: 10px; cursor: help; }
.heat th.stw { background: #fff0a8; color: #6b5800; }
.heat td.stw { box-shadow: inset 0 0 0 999px rgba(255, 214, 0, .22); }
.heat td.over { font-weight: 700; color: oklch(0.42 0.16 25); }
.tbl select.hi { color: var(--red); font-weight: 700; }
.fh { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.form textarea { border: 1px solid #d5dae1; background: #fff; padding: 6px 8px; }
.dash-h { margin: 2px 0 14px; } .dash-h h2 { margin: 0; font: 750 18px var(--font-ui); } .dash-h p { margin: 6px 0 0; color: #475467; max-width: 900px; }
.c-id { position: sticky; left: 0; z-index: 3; width: 40px; color: var(--faint); font: 500 11px var(--font-mono); text-align: right; padding-right: 8px !important; }
.c-name { position: sticky; left: 40px; z-index: 3; width: 300px; box-shadow: 2px 0 0 var(--line); }
th.c-id, th.c-name { z-index: 6; }
.nm { display: flex; align-items: center; gap: 4px; }
.nm.d2 { padding-left: 20px; }
.nm .wbs { color: var(--faint); font: 500 10.5px var(--font-mono); flex: 0 0 auto; min-width: 22px; }
.nm input { font-weight: inherit; }
.chev { background: none; border: 0; cursor: pointer; width: 18px; height: 22px; color: var(--muted); padding: 0; flex: 0 0 auto; }
.ro { display: block; padding: 0 5px; color: #344054; overflow: hidden; text-overflow: ellipsis; }
.num { text-align: right; } td .num, td input[type=number] { text-align: right; }
.c-owner { width: 130px; } .c-type { width: 96px; } .c-hours { width: 62px; } .c-alloc { width: 58px; } .c-preds { width: 90px; } .c-pct { width: 58px; }
.c-start, .c-end { width: 98px; } .c-days { width: 48px; } .c-status { width: 92px; } .c-act { width: 92px; }
.c-lag { width: 54px; } .c-snet, .c-base { width: 124px; } .c-var { width: 52px; } .c-load { width: 58px; } .c-succ { width: 110px; } .c-notes { width: 260px; }
.sched.mode-chart td[class*="col-"], .sched.mode-chart th[class*="col-"] { display: none; }
.sched.mode-table .gantt { display: none; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 650 10.5px/18px var(--font-ui); background: #eef0f3; color: #475467; }
.chip.s-Complete { background: color-mix(in oklch, var(--green) 18%, #fff); color: oklch(0.4 0.1 150); }
.chip.s-In { background: color-mix(in oklch, var(--blue) 14%, #fff); color: oklch(0.42 0.15 258); }
.chip.s-Overdue { background: color-mix(in oklch, var(--red) 16%, #fff); color: oklch(0.45 0.16 25); }
.chip.s-Late { background: color-mix(in oklch, var(--amber) 28%, #fff); color: oklch(0.45 0.1 70); }
.v-pos { color: var(--red); font-weight: 650; } .v-neg { color: var(--green); font-weight: 650; }
.over { color: var(--red); font-weight: 700; }
.acts { display: flex; gap: 1px; justify-content: flex-end; opacity: .35; }
tr:hover .acts, tr.sel .acts { opacity: 1; }
.ib { background: none; border: 0; cursor: pointer; width: 21px; height: 22px; border-radius: 5px; color: var(--muted); padding: 0; font-size: 13px; }
.ib:hover { background: #e6e9ee; color: var(--ink); } .ib.del:hover { color: var(--red); }

.gantt { flex: 0 0 auto; position: relative; }
.g-row.sel { box-shadow: inset 0 0 0 999px rgba(59, 110, 240, .07); }
.stweek { position: absolute; top: 0; bottom: 0; background: #fff6c9; opacity: .75; pointer-events: none; }
.g-head { position: sticky; top: 0; z-index: 4; background: #f0f2f6; height: 44px; border-bottom: 1px solid var(--line); }
.g-months, .g-weeks { display: flex; height: 22px; }
.g-months div { font: 650 11px/22px var(--font-ui); color: var(--muted); padding-left: 6px; border-left: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
.g-weeks div { font: 500 9.5px/22px var(--font-mono); color: var(--faint); border-left: 1px solid var(--line2); text-align: center; overflow: hidden; }
.g-body { position: relative; }
.g-row { height: var(--row); border-bottom: 1px solid var(--line2); position: relative; }
.bar { position: absolute; top: 7px; height: 16px; border-radius: 4px; background: color-mix(in oklch, var(--blue) 30%, #fff); border: 1px solid color-mix(in oklch, var(--blue) 55%, #fff); overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); opacity: .9; }
.bar.late { background: color-mix(in oklch, var(--red) 28%, #fff); border-color: var(--red); }
.bar.span { top: 11px; height: 8px; background: #3b4252; border-color: #3b4252; border-radius: 2px; }
.bar.span i { background: #7fd3a0; }
.ms { position: absolute; top: 8px; width: 14px; height: 14px; background: var(--gold); transform: rotate(45deg); border-radius: 2px; border: 1px solid oklch(0.6 0.12 80); }
.today { position: absolute; top: 0; bottom: 0; width: 2px; background: color-mix(in oklch, var(--amber) 70%, transparent); z-index: 2; pointer-events: none; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 9px; color: var(--muted); font-size: 11.5px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend b { display: inline-block; width: 18px; height: 9px; border-radius: 2px; }

/* ---- cards / dashboard / tables ---- */
.grid { display: grid; gap: 14px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .g2 { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; min-width: 0; }
.card h3 { margin: 0 0 11px; font: 700 13px var(--font-ui); }
.card h3 small { font-weight: 500; color: var(--muted); margin-left: 6px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stat b { display: block; font: 750 20px/1.2 var(--font-ui); } .stat span { color: var(--muted); font-size: 11.5px; }
.stat.warn b { color: var(--red); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font: 650 11px var(--font-ui); color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.scroll-x { overflow-x: auto; }
/* ---- tools ribbon ---- */
.ribbon { display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.rgrp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-right: 16px; border-right: 1px solid var(--line2); }
.rgrp:last-child { border-right: 0; padding-right: 0; }
.rl { font: 650 10px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-right: 2px; }
.selinfo { font-size: 12px; color: #344054; }
.btn.sm { padding: 3px 9px; font-size: 12px; } .btn.fb { min-width: 28px; }
.btn.on { background: color-mix(in oklch, var(--blue) 14%, #fff); border-color: var(--blue); color: var(--blue); }
.btn:disabled, .seg button:disabled, select:disabled { opacity: .45; cursor: default; pointer-events: none; }
.fsel { width: auto !important; border-color: #d5dae1 !important; background: #fff !important; height: 30px !important; padding: 3px 6px !important; }
.fsel.sm { height: 26px !important; font-size: 12px; }
.search { width: 220px !important; height: 30px !important; border: 1px solid #d5dae1 !important; background: #fff !important; border-radius: 7px; padding: 4px 10px !important; }
code { font: 500 11.5px var(--font-mono); background: #eef0f3; padding: 1px 5px; border-radius: 4px; }
.faint { color: var(--faint); }

/* ---- modal / popovers ---- */
.modal-bg { position: fixed; inset: 0; background: rgba(16, 20, 28, .45); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: #fff; border-radius: 12px; width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); }
.modal h3 { margin: 0; padding: 16px 20px 0; font: 700 15px var(--font-ui); }
.modal-body { padding: 12px 20px; overflow: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; }
.modal-body input[type=text] { border-color: #d5dae1; background: #fff; height: 32px; padding: 4px 9px; }
.modal-body select { border-color: #d5dae1; background: #fff; height: 32px; }
.adj-prev { background: #f6f8fb; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-size: 12px; line-height: 1.6; min-height: 40px; }
.pop { position: fixed; z-index: 55; background: #fff; border: 1px solid #d5dae1; border-radius: 10px; box-shadow: 0 12px 36px rgba(0, 0, 0, .2); padding: 10px; }
.sw { display: grid; grid-template-columns: repeat(5, 26px); gap: 6px; }
.sw button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .18); cursor: pointer; padding: 0; }
.sw button.none { background: #fff; color: var(--muted); }
.colpick { display: grid; gap: 5px; min-width: 190px; max-height: 60vh; overflow: auto; }
.colpick label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.colpick input { width: auto; height: auto; }
.top .btn.share { margin-left: 4px; background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); }
.top .btn.share:hover { background: rgba(255,255,255,.22); color: #fff; border-color: #fff; }
.help { display: grid; gap: 14px; max-width: 900px; }
.help ul, .help ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; }
.tbl td select { min-width: 104px; } .tbl td input[type=date] { min-width: 132px; } .tbl td input[type=text] { min-width: 120px; }
.g2 > .wide { grid-column: 1 / -1; }
.tbl.nw td, .tbl.nw th { white-space: nowrap; }
.tbl.nw td:first-child { white-space: normal; }
.pbar { height: 8px; border-radius: 4px; background: #eef0f3; overflow: hidden; min-width: 80px; }
.pbar i { display: block; height: 100%; background: var(--green); }
.pbar.blue i { background: var(--blue); }
.heat { border-collapse: separate; border-spacing: 0; }
.heat th { position: sticky; top: 0; background: #f0f2f6; font: 500 10px var(--font-mono); color: var(--faint); padding: 4px 0; text-align: center; min-width: 40px; z-index: 2; }
.heat th.mo { font: 650 11px var(--font-ui); color: var(--muted); text-align: left; padding-left: 6px; }
.heat td { text-align: center; font: 500 10.5px var(--font-mono); height: 30px; border: 1px solid #fff; color: #344054; }
.heat td.nm { position: sticky; left: 0; background: #fff; text-align: left; padding: 0 12px 0 0; font: 650 12.5px var(--font-ui); z-index: 1; white-space: nowrap; border: 0; }
.form { display: grid; grid-template-columns: 170px 1fr; gap: 12px 14px; align-items: start; max-width: 620px; }
.form > label { padding-top: 7px; }
.form label { color: var(--muted); font-weight: 600; font-size: 12px; }
.days { display: flex; gap: 6px; flex-wrap: wrap; } .days label { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 500; }
.hint { color: var(--muted); font-size: 12px; margin: 4px 0 10px; }
.empty { color: var(--muted); text-align: center; padding: 30px; }

#toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
#toast div { background: #16181d; color: #fff; padding: 9px 15px; border-radius: 9px; font-weight: 600; box-shadow: 0 8px 28px rgba(0,0,0,.25); max-width: 80vw; }
#toast div.err { background: oklch(0.45 0.16 25); }

@media (max-width: 760px) {
  main { padding: 12px; } .sched { height: calc(100vh - 230px); }
  .c-name { width: 200px; } .form { grid-template-columns: 1fr; }
}