:root {
  --b1: #1e2430;
  --b2: #4a5262;
  --line: #d7dbe2;
  --bg: #f6f7f9;
  --ok: #17794a;
  --warn: #9a6a00;
  --err: #b42318;
  --accent: #2059b0;
}
* { box-sizing: border-box; }
body {
  margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--b1); background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.top {
  display: flex; align-items: center; gap: 1.4rem;
  padding: .55rem 1.2rem; background: #fff; border-bottom: 1px solid var(--line);
}
.top .brand { font-weight: 650; color: var(--b1); }
.top nav { display: flex; gap: 1rem; }
.top .user { margin-left: auto; display: flex; gap: .7rem; align-items: center; color: var(--b2); }
.wrap { max-width: 1280px; margin: 1.2rem auto 4rem; padding: 0 1.2rem; }
h1 { font-size: 1.35rem; margin: .4rem 0 .6rem; }
h2 { font-size: 1.05rem; margin: .2rem 0 .6rem; }
.crumbs { color: var(--b2); font-size: .9rem; margin-top: .6rem; }
.meta { color: var(--b2); margin: .2rem 0 .9rem; }
.muted { color: #667085; }
.small { font-size: .85rem; }
.err { color: var(--err); min-height: 1.2em; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: .9rem 1rem; margin: .8rem 0;
}
.login-card { max-width: 380px; margin: 4rem auto; }
.grid { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.grid th, .grid td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.grid th { background: #eef1f5; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: #fbfcfe; }
.rows-table td { padding: .3rem .35rem; }
.form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .6rem .9rem; align-items: end;
}
.form-grid label, .card form label { display: flex; flex-direction: column; gap: .18rem; font-size: .9rem; }
label input, label select, .sel, .num {
  padding: .32rem .45rem; border: 1px solid var(--line); border-radius: 7px;
  font: inherit; background: #fff; color: var(--b1);
}
.num.narrow { width: 5.5rem; }
.sel.narrow { width: 3.6rem; }
.sel.wide { max-width: 15rem; }
.row { display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; }
button {
  font: inherit; padding: .38rem .8rem; border: 1px solid var(--accent);
  background: #fff; color: var(--accent); border-radius: 8px; cursor: pointer;
}
button:hover { background: #eef3fb; }
button.accent { background: var(--accent); color: #fff; }
button.accent:hover { background: #174a94; }
button.ghost { border-color: var(--line); color: var(--b2); }
button.danger { border-color: #e4a9a4; color: var(--err); padding: .2rem .5rem; }
button:disabled { opacity: .55; cursor: default; }
.badge {
  display: inline-block; padding: .05rem .45rem; border-radius: 999px;
  background: #e9edf3; font-size: .8rem; color: var(--b2);
}
.badge.active { background: #dff3e7; color: var(--ok); }
.badge.draft { background: #f3eedd; color: var(--warn); }
.badge.archived { background: #e9edf3; color: #667085; }
.rows-table tr.warn td { background: #fdf6e3; }
.rows-table tr.conflict td { background: #fdeceb; }
.rows-table tr.dirty td { background: #eef5ff; }
.rows-table tr.flash td { animation: flash 1.1s ease; }
@keyframes flash {
  0% { background: #ffe58f; }
  100% { background: inherit; }
}
.toolbar { display: flex; gap: .8rem; align-items: center; margin: .4rem 0 .8rem; }
.savebar {
  position: fixed; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .4rem .9rem; box-shadow: 0 4px 16px rgba(0,0,0,.08); font-size: .88rem;
}
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: #98a2b3; }
.dot.ok { background: var(--ok); }
.dot.pending { background: #d6a10c; }
.dot.err { background: var(--err); }
.conflicts { border-color: #f0b4ae; background: #fff8f7; }
.conflicts li { margin: .25rem 0; }
.catalog-card .grid { font-size: .85rem; }
.catalog-card .add-form { display: flex; flex-wrap: wrap; gap: .45rem; align-items: end; margin-top: .5rem; }
.catalog-card .add-form label { font-size: .82rem; }
.catalog-card .add-form input { width: 9rem; }
.catalog-card .add-form input.wide { width: 14rem; }
.del { cursor: pointer; }

a.btn {
  display: inline-block; padding: .32rem .75rem; border: 1px solid var(--accent);
  border-radius: 8px; color: var(--accent); background: #fff;
}
a.btn:hover { background: #eef3fb; text-decoration: none; }
textarea { font: inherit; padding: .32rem .45rem; border: 1px solid var(--line); border-radius: 7px; }
.gantt-chart { height: 60vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.gantt-chart svg.gantt { min-width: 100%; }
.timeline-chart { height: 55vh; border: 1px solid var(--line); border-radius: 8px; }
.vis-timeline { border: 0; }
.pbar { background: #eef1f5; border-radius: 999px; height: .55rem; width: 140px; overflow: hidden; display: inline-block; vertical-align: middle; }
.pbar > div { background: var(--accent); height: 100%; }
.pbar.ok > div { background: var(--ok); }
.steps-table .link-btn { padding: .15rem .45rem; font-size: .85rem; margin: 0 .15rem .15rem 0; }