:root {
  --bg: #f4f5f7; --panel: #fff; --text: #1d2330; --muted: #667085; --line: #dfe3ea;
  --accent: #1f5fbf; --accent-soft: #e7effb; --ok: #1e7d4f; --warn: #a36100; --bad: #b42318;
  --ok-soft: #e6f4ec; --warn-soft: #fff3df; --bad-soft: #fdecea;
  --radius: 6px; --font: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 16px; margin: 18px 0 8px; }
h3 { font-size: 14px; margin: 12px 0 6px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: Consolas, "Courier New", monospace; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* layout */
.top { background: #16223a; color: #fff; display: flex; align-items: center; gap: 4px; padding: 0 12px; flex-wrap: wrap; }
.top a, .top button.linklike { color: #d6def0; padding: 10px 9px; display: inline-block; }
.top a.active, .top a:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.top .brand { font-weight: 600; color: #fff; margin-right: 10px; }
.top .spacer { flex: 1; }
.top form { display: inline; margin: 0; }
.top select { background: #233150; color: #fff; border: 1px solid #3a4a6b; border-radius: 4px; padding: 3px; }
.top .bill { color: #ffd479; }
main { padding: 16px; max-width: 1500px; margin: 0 auto; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }

/* banners & messages */
.banner { padding: 8px 16px; font-weight: 600; }
.banner.bad { background: var(--bad); color: #fff; }
.banner.warn { background: #f1b44c; color: #2a1c00; }
.msg { padding: 8px 12px; border-radius: var(--radius); margin-bottom: 8px; border: 1px solid; }
.msg.success { background: var(--ok-soft); border-color: #a6d9bd; }
.msg.info { background: var(--accent-soft); border-color: #b9cff0; }
.msg.warning { background: var(--warn-soft); border-color: #f3cf8c; }
.msg.error { background: var(--bad-soft); border-color: #f3b3ad; }
.notice { padding: 8px 10px; border-radius: var(--radius); background: var(--warn-soft); border: 1px solid #f3cf8c; margin: 6px 0; }
.notice.bad { background: var(--bad-soft); border-color: #f3b3ad; }
.notice.info { background: var(--accent-soft); border-color: #b9cff0; }

/* tables */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 5px 7px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: 12px; background: #fafbfc; }
tr:hover td { background: #fafcff; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.compact td, table.compact th { padding: 3px 6px; }
tfoot td { font-weight: 600; border-top: 2px solid var(--line); }

/* badges */
.badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 12px; background: #eef0f3; white-space: nowrap; }
.st-draft { background: #eceef2; color: #555; }
.st-ready { background: #e7effb; color: #1f4f9a; }
.st-issued { background: #fff3df; color: #8a5300; }
.st-in_progress { background: #e1f3f7; color: #0b6175; }
.st-blocked { background: var(--bad-soft); color: var(--bad); }
.st-to_accept { background: #efe7fb; color: #5b2ea6; }
.st-rework { background: #fde9d9; color: #9a3d00; }
.st-closed { background: var(--ok-soft); color: var(--ok); }
.st-cancelled { background: #eee; color: #888; text-decoration: line-through; }
.pr-high { background: var(--bad); color: #fff; }
.pr-normal { background: #eef0f3; }
.pr-low { background: #f6f7f9; color: #888; }
.flag { display: inline-block; font-size: 11px; padding: 0 5px; border-radius: 3px; background: var(--bad-soft); color: var(--bad); }
.flag.warn { background: var(--warn-soft); color: var(--warn); }
.flag.info { background: var(--accent-soft); color: var(--accent); }
.cs-pending_price { background: var(--bad-soft); color: var(--bad); }
.cs-pending_review { background: var(--warn-soft); color: var(--warn); }
.cs-ready { background: #e7effb; color: #1f4f9a; }
.cs-on_hold { background: #fde9d9; color: #9a3d00; }
.cs-in_draft { background: #efe7fb; color: #5b2ea6; }
.cs-settled { background: var(--ok-soft); color: var(--ok); }
.cs-void { background: #eee; color: #888; text-decoration: line-through; }

/* forms */
label { font-weight: 600; font-size: 12px; color: #3a4252; display: block; margin-bottom: 2px; }
input[type=text], input[type=number], input[type=date], input[type=datetime-local], input[type=email], input[type=password],
input:not([type]), select, textarea {
  width: 100%; padding: 6px 8px; border: 1px solid #c6ccd6; border-radius: 4px; font: inherit; background: #fff;
}
input.num { text-align: right; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #9ec0f5; border-color: var(--accent); }
.field { margin-bottom: 10px; }
.field .help { font-size: 12px; color: var(--muted); }
.field .err, .errorlist { color: var(--bad); font-size: 12px; margin: 2px 0; padding: 0; list-style: none; }
.field.check label { display: inline; font-weight: normal; }
.fields { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fields .wide { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 12px; padding: 8px 12px; background: #fff; }
legend { font-weight: 600; padding: 0 6px; }
ul.choices, .field ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.field ul label { font-weight: normal; display: inline; }
.btn, button { display: inline-block; padding: 6px 12px; border-radius: 4px; border: 1px solid #b8c0cc; background: #fff;
  font: inherit; cursor: pointer; color: var(--text); text-decoration: none; white-space: nowrap; }
.btn:hover, button:hover { background: #f1f3f6; text-decoration: none; }
.btn.primary, button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover, button.primary:hover { background: #184f9f; }
.btn.danger, button.danger { border-color: var(--bad); color: var(--bad); }
.btn.ok, button.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.small, button.small { padding: 2px 8px; font-size: 12px; }
button.linklike { background: none; border: none; color: var(--accent); padding: 0; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; align-items: flex-start; }
details.action { display: inline-block; }
details.action > summary { list-style: none; cursor: pointer; }
details.action > summary::-webkit-details-marker { display: none; }
details.action[open] > div { position: absolute; z-index: 5; background: #fff; border: 1px solid var(--line); padding: 10px;
  border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0,0,0,.12); width: 340px; margin-top: 4px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.filters > div { min-width: 130px; }
.filters label { font-size: 11px; }
.pager { margin-top: 10px; display: flex; gap: 10px; align-items: center; }

/* dashboard */
.worker { border-left: 4px solid var(--accent); }
.worker.absent { border-left-color: #c0c4cc; opacity: .75; }
.tasklet { padding: 4px 0; border-bottom: 1px dashed var(--line); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.tasklet:last-child { border-bottom: none; }
.kpi { font-size: 26px; font-weight: 700; }
.kpi-label { color: var(--muted); font-size: 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpis a.panel { color: inherit; }
.kpis a.panel:hover { text-decoration: none; border-color: var(--accent); }
.kpis .bad .kpi { color: var(--bad); }
.kpis .warn .kpi { color: var(--warn); }

.quick input[name=code] { font-size: 22px; padding: 10px; font-family: Consolas, monospace; }
.timeline { border-left: 2px solid var(--line); margin-left: 6px; padding-left: 12px; }
.timeline > div { margin-bottom: 6px; }
pre.trace { background: #fafbfc; border: 1px solid var(--line); padding: 8px; white-space: pre-wrap; margin: 0; font-size: 12px; }
.lineinput { width: 110px; }
@media print { .noprint { display: none !important; } }

/* ===================================================================
   Soft color zones. Each functional area has a tone; panels can override
   with .t-blue / .t-teal / .t-violet / .t-amber / .t-rose / .t-slate / .t-green
   =================================================================== */
:root {
  --bg: #f2f4f7;
  --blue: #4a78c2;   --blue-soft: #eef3fb;
  --teal: #2f8f84;   --teal-soft: #eaf5f3;
  --violet: #7563b8; --violet-soft: #f2effa;
  --amber: #b9822a;  --amber-soft: #fbf4e7;
  --rose: #c25a6b;   --rose-soft: #fbeef0;
  --slate: #66758a;  --slate-soft: #f1f3f7;
  --green: #4f8f5b;  --green-soft: #edf6ef;
  --tone: var(--blue); --tone-soft: var(--blue-soft);
}
body.area-tasks, .t-blue     { --tone: var(--blue);   --tone-soft: var(--blue-soft); }
body.area-report, .t-teal    { --tone: var(--teal);   --tone-soft: var(--teal-soft); }
body.area-accept, .t-violet  { --tone: var(--violet); --tone-soft: var(--violet-soft); }
body.area-billing, .t-amber  { --tone: var(--amber);  --tone-soft: var(--amber-soft); }
.t-rose                      { --tone: var(--rose);   --tone-soft: var(--rose-soft); }
body.area-md, body.area-wf, .t-slate { --tone: var(--slate); --tone-soft: var(--slate-soft); }
body.area-dashboard, .t-green { --tone: var(--green); --tone-soft: var(--green-soft); }

.top { background: #24324d; }
.top a.nav-active { color: #fff; box-shadow: inset 0 -3px 0 var(--tone); background: rgba(255,255,255,.06); }
main > h1, main > .row > h1, main > div > h1 { border-left: 4px solid var(--tone); padding-left: 10px; }

.panel { border-top: 3px solid var(--tone); box-shadow: 0 1px 2px rgba(20,30,50,.04); }
.panel > .row:first-child > h3 { color: var(--tone); margin: 0; }
.panel > .row:first-child { background: var(--tone-soft); margin: -12px -14px 10px; padding: 8px 14px;
  border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.panel > h3:first-child, .panel > h2:first-child {
  color: var(--tone); background: var(--tone-soft); margin: -12px -14px 10px; padding: 8px 14px;
  border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
}
fieldset { border-top: 3px solid var(--tone); }
legend { color: var(--tone); }
.kpis .panel { border-top-width: 0; border-left: 4px solid var(--tone); background: linear-gradient(90deg, var(--tone-soft), #fff 70%); }
.kpis .panel.bad  { --tone: var(--rose);  --tone-soft: var(--rose-soft); }
.kpis .panel.warn { --tone: var(--amber); --tone-soft: var(--amber-soft); }
.kpis .panel .kpi { color: var(--tone); }
.worker { border-left: 4px solid var(--teal); border-top-color: var(--teal); }
.worker.absent { border-left-color: #c0c6d0; border-top-color: #c0c6d0; }
.btn.primary, button.primary { background: var(--tone); border-color: var(--tone); }
.btn.primary:hover, button.primary:hover { filter: brightness(.92); background: var(--tone); }
th { background: var(--tone-soft); color: #4a5568; }
.filters.panel { background: var(--tone-soft); border-top-width: 1px; }
.actions .btn, .actions button { border-color: #c8cfda; }


/* minute timeline on worker cards */
.timeline-bar { position: relative; height: 26px; margin: 8px 0 2px; background: #fff;
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.timeline-bar .tick { position: absolute; top: 0; bottom: 0; border-left: 1px dashed #dde2ea; font-size: 9px; color: #9aa4b2; padding-left: 2px; line-height: 10px; }
.timeline-bar .tb { position: absolute; top: 10px; bottom: 2px; border-radius: 3px; font-size: 10px; line-height: 13px; padding: 0 3px;
  overflow: hidden; white-space: nowrap; color: #24324d; text-decoration: none; border: 1px solid rgba(0,0,0,.08); }
.tb.task { background: #cddcf4; } .tb.routine { background: #cbe8e2; }
.tb.break { background: repeating-linear-gradient(45deg, #eceff3, #eceff3 4px, #f7f8fa 4px, #f7f8fa 8px); color: #8a94a3; }
.tb.done { opacity: .55; } .tb.running { background: #9fd4c9; font-weight: 600; } .tb.late { background: #f3c9d0; }
.timeline-bar .nowline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rose); }
.time { color: var(--teal); }
.top a.alert-badge { color: #aab6cc; } .top a.alert-badge.on { color: #fff; background: var(--rose); border-radius: 4px; }
.alert-kind { font-size: 12px; padding: 1px 6px; border-radius: 3px; background: var(--amber-soft); color: var(--amber); }
.alert-kind.k-overdue { background: var(--rose-soft); color: var(--rose); font-weight: 600; }
.alert-kind.k-late_plan { background: var(--rose-soft); color: var(--rose); }
.alert-kind.k-not_started { background: var(--violet-soft); color: var(--violet); }


/* M5 status strip */
.status-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.st-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 10px; border-radius: 16px; background: var(--slate-soft);
  color: #3b4656; border: 1px solid var(--line); text-decoration: none; font-size: 13px; }
.st-chip:hover { text-decoration: none; filter: brightness(.97); }
.st-chip.s-working { background: var(--teal-soft); border-color: #b9ddd7; color: #1f6158; }
.st-chip.s-overrun { background: var(--rose-soft); border-color: #efc1c9; color: #8f3343; }
.st-chip.s-idle { background: var(--amber-soft); border-color: #ecd3a6; color: #7b5612; }
.st-chip.s-late { background: var(--rose-soft); border-color: #efc1c9; color: #8f3343; }
.st-chip.s-break { background: var(--violet-soft); border-color: #d7cff0; color: #4f3f8f; }
.st-chip.s-absent, .st-chip.s-off, .st-chip.s-done { opacity: .7; }
.alert-kind.k-idle { background: var(--amber-soft); color: var(--amber); font-weight: 600; }
.alert-kind.k-late, .alert-kind.k-overrun { background: var(--rose-soft); color: var(--rose); }