* { box-sizing: border-box; margin: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  background: #f2f5f9; color: #24324a; font-size: 15px; line-height: 1.55;
}
.demo-banner {
  background: #fff4d6; color: #8a6403; text-align: center;
  padding: 6px; font-size: 13px;
}
nav {
  display: flex; align-items: center; gap: 22px; padding: 14px 26px;
  background: #0f2137;
}
nav .brand { font-weight: 600; color: #fff; letter-spacing: .2px; margin-right: 10px; }
nav a { color: #9fb1c9; text-decoration: none; font-size: 14px; padding-bottom: 3px; border-bottom: 2px solid transparent; }
nav a:hover { color: #e8eef7; }
nav a.on { color: #fff; font-weight: 600; border-bottom-color: #2dd4bf; }
nav .spacer { flex: 1; }
nav .who { color: #7d90a9; font-size: 13px; }
main { max-width: 1140px; margin: 0 auto; padding: 26px 22px 70px; }
h1 { font-size: 22px; font-weight: 600; color: #12253f; }
h2 { font-size: 16px; font-weight: 600; color: #12253f; margin: 28px 0 12px; }
.sub { color: #7c8aa0; font-size: 13px; margin-top: 3px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 10px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; margin: 20px 0; }
.tile {
  background: #fff; border-radius: 12px; padding: 15px 16px;
  box-shadow: 0 1px 3px rgba(15, 33, 55, .07); display: flex; gap: 12px; align-items: flex-start;
}
.ticon {
  width: 40px; height: 40px; border-radius: 10px; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ticon svg { width: 21px; height: 21px; }
.ticon.blue { background: #3b82f6; } .ticon.green { background: #22c55e; }
.ticon.violet { background: #8b5cf6; } .ticon.orange { background: #f59e0b; }
.ticon.red { background: #ef4444; }
.tile .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: #7c8aa0; }
.tile .value { font-size: 24px; font-weight: 600; color: #12253f; margin-top: 1px; line-height: 1.2; }
.tile .subl { font-size: 11.5px; color: #7c8aa0; margin-top: 2px; }
.livedot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: 3px; }
.deptlink { font-size: 13px; color: #35507a; text-decoration: none; background: #fff; border: 1px solid #dbe4ef; border-radius: 8px; padding: 6px 11px; }
.deptlink:hover { border-color: #b9c7d9; background: #f3f7fc; }

.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.col { background: #e9edf4; border-radius: 10px; padding: 9px; min-height: 90px; }
.col h3 { font-size: 12px; font-weight: 600; color: #45536b; padding: 2px 4px 8px; display: flex; justify-content: space-between; align-items: center; }
.col h3 small {
  background: #fff; color: #64748b; font-weight: 600; font-size: 11px;
  padding: 1px 8px; border-radius: 9px;
}
.chip {
  display: block; text-decoration: none; cursor: pointer;
  background: #e5f5eb; border: 1px solid #c6e8d3; border-radius: 8px;
  padding: 8px 9px; margin-bottom: 7px; font-size: 12px;
  box-shadow: 0 1px 2px rgba(15, 33, 55, .05);
}
.chip:hover { box-shadow: 0 2px 6px rgba(15, 33, 55, .14); }
.chip .id { font-family: ui-monospace, monospace; font-weight: 600; font-size: 13px; color: #14532d; }
.chip .age { float: right; color: #3f7a55; font-size: 11px; }
.chip .meta { color: #4c7a5f; font-size: 11px; margin-top: 2px; }
.chip.flag { background: #fcf3d7; border-color: #efdca4; }
.chip.flag .id { color: #7c5806; } .chip.flag .age, .chip.flag .meta { color: #96742a; }
.chip.alert { background: #fce9e7; border-color: #f3c5c0; }
.chip.alert .id { color: #9f2419; } .chip.alert .age, .chip.alert .meta { color: #b04a40; }
.chip .tags { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; }
.pill, .tag {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 8px;
  letter-spacing: .2px; white-space: nowrap;
}
.pill.ok { background: #d6efe0; color: #166534; }
.pill.flag { background: #f6e5b3; color: #7c5806; }
.pill.alert { background: #f6cfca; color: #9f2419; }
.tag { background: #fff; border: 1px solid #efdca4; color: #96742a; text-transform: uppercase; }

.excount { color: #dc2626; }
.closex { font-size: 12px; font-weight: 500; color: #7c8aa0; text-decoration: none; margin-left: 8px; }
.closex:hover { color: #24324a; }
.extable { padding: 6px 10px; overflow-x: auto; }
.exrow {
  display: grid; align-items: center; gap: 10px; min-width: 660px;
  grid-template-columns: 24px 52px minmax(90px, 1fr) 62px 92px 70px 110px 62px;
  padding: 11px 8px; border-bottom: 1px solid #edf1f7; font-size: 13px;
}
.exrow:last-child { border-bottom: none; }
.exicon {
  width: 22px; height: 22px; border-radius: 6px; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.exicon.alert { background: #fce9e7; color: #dc2626; }
.exicon.flag { background: #fcf3d7; color: #d97706; }
.exid { font-family: ui-monospace, monospace; font-weight: 600; color: #16294a; text-decoration: none; }
.exid:hover { text-decoration: underline; }
.exid small { display: block; font-size: 10px; font-weight: 400; color: #7c8aa0; font-family: inherit; }
.ocdate { font-size: 13px; color: #7c8aa0; margin: 0 8px 0 2px; }
.exstage { color: #45536b; }
.exmins { font-weight: 600; }
.exmins.alert { color: #dc2626; } .exmins.flag { color: #b45309; }
.exbadge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 9px; text-align: center; }
.exbadge.alert { background: #fce9e7; color: #9f2419; border: 1px solid #f3c5c0; }
.exbadge.flag { background: #fcf3d7; color: #7c5806; border: 1px solid #efdca4; }
.exshort { color: #96742a; font-size: 12px; }
.exwho, .extime { color: #7c8aa0; font-size: 12px; }
.exrow.allok { grid-template-columns: 1fr; min-width: 0; color: #14532d; background: #e5f5eb; border-radius: 8px; margin: 6px 0; border: none; }

.ochead { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.ocid { font-family: ui-monospace, monospace; font-weight: 700; font-size: 20px; color: #12253f; margin-right: 8px; }
.ocbadge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 10px; vertical-align: 3px; }
.ocbadge.done { background: #d6efe0; color: #166534; }
.ocbadge.open { background: #e3edfb; color: #1d4ed8; }
.ocstats { display: flex; gap: 22px; align-items: center; }
.ocstat .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: #7c8aa0; }
.ocstat .value { font-size: 19px; font-weight: 600; color: #12253f; }
.sub.warn { color: #96742a; margin-top: 8px; }

.card {
  background: #fff; border: 1px solid #e3e9f1; border-radius: 12px;
  padding: 18px 22px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(15, 33, 55, .05);
}
.timeline { display: flex; gap: 0; margin: 12px 0 4px; }
.step { flex: 1; text-align: center; position: relative; font-size: 11px; }
.step .dot { width: 11px; height: 11px; border-radius: 50%; background: #16a34a; margin: 0 auto 6px; position: relative; z-index: 1; border: 2px solid #fff; box-sizing: content-box; }
.step .dot.flag { background: #d97706; }
.step .dot.alert { background: #dc2626; }
.step::before {
  content: ""; position: absolute; top: 6px; left: -50%; width: 100%;
  height: 2px; background: #d5deea;
}
.step:first-child::before { display: none; }
.step .name { font-weight: 600; color: #223349; }
.step .when { color: #8494ab; }
.step .dur { font-weight: 600; color: #3f7a55; margin-top: 1px; }
.step .dur.flag { color: #b45309; }
.step .dur.alert { color: #dc2626; }

.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.person { display: flex; gap: 9px; align-items: center; background: #fff; border: 1px solid #e3e9f1; border-radius: 10px; padding: 9px 11px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: #dbe7f4; color: #29486b;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex: none;
}
.person .nm { font-size: 13px; font-weight: 600; color: #223349; }
.person .st { font-size: 11px; color: #7c8aa0; }

table.list { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 33, 55, .05); }
table.list th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: #7c8aa0; font-weight: 600; padding: 10px 10px; background: #f7f9fc;
  border-bottom: 1px solid #dfe6ef;
}
table.list td { padding: 10px; border-bottom: 1px solid #edf1f7; }
table.list tr:last-child td { border-bottom: none; }
table.list .id { font-family: ui-monospace, monospace; font-weight: 600; color: #16294a; }
table.list a { color: inherit; text-decoration: none; }
table.list tr:hover td { background: #f2f6fc; }
.badge { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 10px; white-space: nowrap; }
.badge.short { background: #fcf3d7; color: #7c5806; }
.badge.full { background: #e5f5eb; color: #14532d; }
.badge.open { background: #e3edfb; color: #1d4ed8; }
.badge.cancelled, .ocbadge.cancelled { background: #e8e8ec; color: #64748b; }
button.danger { border-color: #f3c5c0; color: #9f2419; }
button.danger:hover { background: #fce9e7; border-color: #e8a49d; }

.deptlink.sel { border-color: #0d9488; color: #0d9488; font-weight: 600; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #45536b; margin-bottom: 12px; }
.legend .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.d0 { background: #3b82f6; } .d1 { background: #14b8a6; } .d2 { background: #8b5cf6; }
.d3 { background: #f59e0b; } .d4 { background: #ec4899; } .d5 { background: #64748b; }
.trow { display: grid; grid-template-columns: 58px minmax(0, 1fr) 40px 70px; gap: 10px; align-items: center; padding: 3px 0; font-size: 12.5px; }
.tlabel { color: #7c8aa0; text-align: right; }
.tlabel.wide, .tnum.wide { width: auto; }
.trow:has(.tlabel.wide) { grid-template-columns: 150px minmax(0, 1fr) 90px; }
.tlabel.mono { font-family: ui-monospace, monospace; color: #16294a; font-weight: 600; }
.ttrack { background: #eef1f6; border-radius: 5px; height: 16px; overflow: hidden; }
.tbar { display: flex; height: 100%; border-radius: 5px; overflow: hidden; }
.tseg { display: block; height: 100%; }
.tbar.solid { background: #3b82f6; }
.tbar.short { background: #f59e0b; }
.tnum { font-weight: 600; color: #12253f; }
.tavg { font-size: 11.5px; color: #7c8aa0; }

input, select, button {
  font: inherit; font-size: 14px; padding: 8px 11px;
  border: 1px solid #cfd9e6; border-radius: 8px; background: #fff; color: #24324a;
}
input:focus, select:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13, 148, 136, .15); }
button { cursor: pointer; font-weight: 500; }
button:hover { background: #f3f7fc; border-color: #b9c7d9; }
button.primary { background: #0d9488; color: #fff; border-color: #0d9488; }
button.primary:hover { background: #0b7f74; }
label.check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: #0d9488; }
.grid-dept { display: grid; grid-template-columns: 70px 1fr; gap: 8px; max-width: 420px; margin-bottom: 8px; }
.grid-thresh { display: grid; grid-template-columns: 1fr 110px 110px; gap: 8px; align-items: center; max-width: 560px; margin-bottom: 8px; }
.grid-thresh .h { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #7c8aa0; }
.hint { font-size: 12px; color: #7c8aa0; margin: 4px 0 12px; }
.msg { background: #e5f5eb; color: #14532d; border: 1px solid #c6e8d3; border-radius: 8px; padding: 9px 15px; font-size: 13px; margin-bottom: 14px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.gallery img { width: 100%; border-radius: 10px; border: 1px solid #e3e9f1; display: block; }
.gallery .cap { font-size: 12px; color: #7c8aa0; margin-top: 5px; }
.pdfcard {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 130px; background: #fceceb; border: 1px solid #f2c7c3; border-radius: 10px;
  color: #b0322a; font-size: 14px; font-weight: 600; text-decoration: none; text-align: center;
}
.pdfcard small { font-weight: 400; font-size: 11px; margin-top: 4px; }
.login-box {
  max-width: 350px; margin: 90px auto; background: #fff; border: 1px solid #e3e9f1;
  border-radius: 14px; padding: 30px; box-shadow: 0 4px 16px rgba(15, 33, 55, .08);
}
.login-box h1 { margin-bottom: 4px; }
.login-box form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.err { color: #9f2419; font-size: 13px; }
@media (max-width: 780px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  nav { gap: 14px; padding: 12px 16px; }
}