@font-face { font-family: Saans; font-weight: 400; src: url(fonts/Saans-Regular.woff2) format("woff2"); }
@font-face { font-family: Saans; font-weight: 500; src: url(fonts/Saans-Medium.woff2) format("woff2"); }
@font-face { font-family: Saans; font-weight: 600; src: url(fonts/Saans-SemiBold.woff2) format("woff2"); }
* { box-sizing: border-box; }
body { margin: 0; background: #eeeeee; color: #040a0e; font: 400 13px/1.5 Saans, Helvetica, Arial, sans-serif; }
a { color: #2a657e; }
a:hover { color: #204d60; }
h1, h3, p { margin: 0; }
.shell { display: flex; min-height: 100vh; }
.rail { flex: 0 0 240px; background: #ffffff; border-right: 1px solid #dddddd; padding: 16px 12px;
  display: flex; flex-direction: column; gap: 2px; }
.brand { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; padding: 4px 12px 20px; }
.nav-item { display: block; padding: 7px 12px; border-radius: 2px; color: #040a0e; text-decoration: none; }
.nav-item:hover { background: #f6f6f6; color: #040a0e; }
.nav-item.active { background: color-mix(in srgb, #2a657e 12%, #ffffff); box-shadow: inset 2px 0 0 #2a657e;
  font-weight: 600; }
.rule { height: 1px; background: #dddddd; margin: 10px 12px; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.head { background: #ffffff; border-bottom: 1px solid #dddddd; padding: 12px 16px; display: flex;
  flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #6a6a6a; }
.title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.status-box { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6a6a6a; }
.age:not(:empty)::before { content: "·"; margin-right: 8px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #37723e; }
.content { display: flex; flex-direction: column; gap: 1px; background: #dddddd; }
.panel { background: #ffffff; padding: 13px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; margin-bottom: 12px; }
.panel-head:only-child { margin-bottom: 0; }
.panel-title { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.insight { background: #f6f6f6; border-radius: 3px; padding: 13px; display: flex; flex-direction: column; gap: 6px; }
.insight p:first-of-type { font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px;
  background: #dddddd; border: 1px solid #dddddd; }
.tile { background: #ffffff; padding: 13px; display: flex; flex-direction: column; gap: 4px; }
.value { font-size: 34px; font-weight: 500; line-height: 1.2; }
.note { font-size: 12px; color: #6a6a6a; }
p.note { margin-top: 8px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min, 360px), 1fr)); gap: 1px;
  background: #dddddd; }
.scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th { text-align: left; padding: 8px 10px; border-bottom: 1px solid #bbbbbb; white-space: nowrap;
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #6a6a6a; }
.tbl td { padding: 6px 10px; border-top: 1px solid #dddddd; white-space: pre-line; overflow-wrap: anywhere;
  vertical-align: top; }