:root{
  --blue-950:#5a2b2b;
  --blue-900:#8a3a3a;
  --blue-800:#b84e4e;
  --blue-700:#d36a6a;
  --blue-100:#ffecec;
  --ink:#0b2a4a;
  --muted:rgba(11,42,74,0.72);
  --border:rgba(211,106,106,0.22);
  --shadow:0 10px 26px rgba(3, 16, 32, 0.14);
  --radius:18px;
  --gold:#f1c40f;
  --white:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(980px 520px at 18% 6%, rgba(211,106,106,0.16), transparent 60%),
    radial-gradient(900px 560px at 82% 18%, rgba(184,78,78,0.16), transparent 58%),
    #fff6f6;
}

button,select{font-family:inherit}
a{color:inherit;text-decoration:none}

.app{
  min-height:100vh;
  width:100%;
  display:flex;
  flex-direction:column;
}

.top{
  background:linear-gradient(180deg, var(--blue-900), var(--blue-800));
  padding: 10px 14px 12px 14px;
  box-shadow: var(--shadow);
}

.topRow{
  display:grid;
  grid-template-columns: 1fr minmax(240px, 2.4fr) 1fr;
  align-items:center;
  gap: 12px;
}

.logoGroup{
  display:flex;
  gap: 10px;
  align-items:center;
  min-width:0;
}
.logoGroup.isRight{justify-content:flex-end}

.logoImg{
  height: 44px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  background: rgba(255,255,255,0.90);
  border-radius: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
}
.logoImg--left{height: 46px}
.logoImg--right{height: 44px}

.logo{
  width: 56px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
}
.logo.isSeal{
  background:
    radial-gradient(circle at 38% 36%, rgba(255,255,255,0.0) 0 12px, rgba(211,106,106,0.14) 13px 18px, transparent 19px),
    linear-gradient(135deg, rgba(211,106,106,0.20), rgba(241,196,15,0.18)),
    rgba(255,255,255,0.92);
}
.logo.isText{background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(233,245,255,0.92))}
.logo.isTextAlt{background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,245,230,0.92))}
.logo.isTextAlt2{background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(240,255,244,0.92))}
.logo.isPartnerA{background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,245,230,0.92))}
.logo.isPartnerB{background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(233,245,255,0.92))}
.logo.isPartnerC{background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(240,255,244,0.92))}

.projectHeading{
  text-align:center;
  min-width:0;
  padding: 0 6px;
}
.projectTitle{
  color: var(--gold);
  font-weight: 950;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.15;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.projectSubtitle{
  margin-top: 4px;
  color: rgba(255,255,255,0.86);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.navBar{
  margin-top: 10px;
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 8px 10px;
  display:flex;
  gap: 10px;
  justify-content:space-between;
  overflow:auto;
}
.navBar a{
  flex: 0 0 auto;
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.4px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.navBar a:hover{border-color: rgba(255,255,255,0.34)}
.navBar a.isActive{
  background: rgba(255,255,255,0.96);
  color: var(--blue-800);
  border-color: rgba(255,255,255,0.64);
}

.screen{
  flex: 1;
  min-height: 0;
  padding: 12px 14px;
  display:grid;
  grid-template-columns: 320px 1fr 360px;
  gap: 12px;
  align-items:stretch;
  overflow:hidden;
}

.infoCard{
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--blue-900), var(--blue-950));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow);
  padding: 12px;
  min-height:0;
  overflow:hidden;
  position:relative;
}
.infoTitle{
  background: linear-gradient(180deg, #ffe06a, var(--gold));
  color: var(--blue-950);
  font-weight: 950;
  letter-spacing: 0.8px;
  text-align:center;
  padding: 10px 12px;
  border-radius: 14px;
  margin-bottom: 10px;
  font-size: 13px;
}
.infoBlock{
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(241,196,15,0.22);
  background: rgba(0,0,0,0.14);
  margin-bottom: 10px;
}
.infoKey{
  color: rgba(241,196,15,0.92);
  font-weight: 950;
  letter-spacing: 0.5px;
  font-size: 11px;
}
.infoVal{
  margin-top: 6px;
  color: rgba(255,255,255,0.94);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.35;
}

.centerCol{
  min-height:0;
  display:grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
}

.tabsPrimary{
  display:flex;
  justify-content:center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.tab{
  border: 1px solid rgba(11,94,168,0.24);
  background: rgba(255,255,255,0.96);
  color: var(--ink);
  font-weight: 950;
  letter-spacing: 0.4px;
  padding: 8px 14px;
  border-radius: 12px;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.tab.isActive{
  background: var(--blue-800);
  border-color: var(--blue-800);
  color: rgba(255,255,255,0.98);
}

.centerTop{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap: 10px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 10px;
}

.tabsSecondary{
  display:flex;
  justify-content:center;
  gap: 10px;
}
.tabSm{
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.08);
  color: rgba(11,42,74,0.92);
  font-weight: 950;
  letter-spacing: 0.4px;
  padding: 7px 12px;
  border-radius: 10px;
  cursor:pointer;
}
.tabSm.isActive{
  background: rgba(11,94,168,0.18);
  border-color: rgba(11,94,168,0.40);
}

.techPanel{
  position:relative;
  flex: 1;
  min-height: 230px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: linear-gradient(135deg, rgba(11,94,168,0.14), rgba(29,118,194,0.12));
}
.techCanvas{
  position:absolute;
  inset:0;
  background:
    radial-gradient(280px 170px at 38% 36%, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(240px 180px at 70% 64%, rgba(255,255,255,0.55), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.14)),
    linear-gradient(135deg, rgba(11,94,168,0.18), rgba(241,196,15,0.10));
  filter: saturate(0.9) contrast(1.05);
}
.techContent{
  position:absolute;
  inset: 18px 64px 18px 64px;
  border-radius: 16px;
  background: rgba(90, 43, 43, 0.62);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 14px 24px rgba(0,0,0,0.18);
  padding: 12px 14px;
  color: rgba(255,255,255,0.94);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.techTitle{
  text-align:center;
  color: var(--gold);
  font-weight: 950;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}
.techList{
  margin: 0;
  padding-left: 18px;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.5;
}
.techList li{margin: 4px 0}

.slideBtn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.38);
  background: rgba(0,0,0,0.26);
  backdrop-filter: blur(4px);
  cursor:pointer;
}
.slideBtn.isPrev{left: 12px}
.slideBtn.isNext{right: 12px}
.slideBtn::before{
  content:"";
  display:block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.slideBtn.isPrev::before{border-right: 10px solid rgba(255,255,255,0.92)}
.slideBtn.isNext::before{border-left: 10px solid rgba(255,255,255,0.92)}

.centerBottom{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 10px;
  min-height:0;
}
.sectionTitle{
  text-align:center;
  font-weight: 950;
  letter-spacing: 0.6px;
  color: var(--ink);
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(11,94,168,0.18);
}
.scopeGrid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 260px;
  gap: 10px;
  align-items:stretch;
  min-height:0;
}
.chartScope{
  width:100%;
  height: 250px;
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(211,106,106,0.16);
}
.legendBox{
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(211,106,106,0.16);
  padding: 10px 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.legendTitle{
  font-weight: 950;
  color: var(--ink);
  letter-spacing: 0.5px;
  font-size: 12px;
}
.legendRow{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(11,42,74,0.88);
  font-weight: 850;
  font-size: 11px;
  line-height: 1.25;
}
.legendDot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 3px;
  flex: 0 0 auto;
}
.legendDot.isBlue{background:#2d7dd2}
.legendDot.isCyan{background:#1bb3d7}
.legendDot.isOrange{background:#ff8c2a}
.legendDot.isPurple{background:#8e44ad}
.legendDot.isRed{background:#e74c3c}

.rightCol{
  min-height:0;
  display:grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
}

.progressGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.progressCard{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 10px 10px 12px 10px;
}
.progressLabel{
  text-align:center;
  font-weight: 950;
  color: var(--ink);
  letter-spacing: 0.5px;
  font-size: 12px;
}
.chartDonut{
  width: 100%;
  height: 128px;
}

.progressMeta{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  justify-content:space-between;
}
.metaRow{
  border-radius: 14px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(211,106,106,0.16);
  padding: 10px 10px;
}
.metaLabel{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--ink);
  margin-bottom: 8px;
  text-align:center;
}
.metaSelect{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(211,106,106,0.20);
  padding: 10px 12px;
  font-weight: 900;
  color: var(--ink);
  background: rgba(211,106,106,0.06);
}
.metaRow.isDays{
  display:flex;
  align-items:center;
  gap: 10px;
}
.daysIcon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(184,78,78,0.20), rgba(211,106,106,0.16));
  border: 1px solid rgba(211,106,106,0.18);
}
.daysValue{
  font-weight: 950;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.1;
}
.daysLabel{
  margin-top: 2px;
  font-weight: 900;
  letter-spacing: 0.4px;
  font-size: 11px;
  color: var(--muted);
}

.mapCard{
  position:relative;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 240px;
}
.mapCanvas{
  position:absolute;
  inset:0;
  background:
    radial-gradient(340px 220px at 42% 46%, rgba(20,100,60,0.14), transparent 60%),
    radial-gradient(320px 220px at 76% 62%, rgba(120,80,20,0.12), transparent 60%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.06), rgba(0,0,0,0.06) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.06) 1px, transparent 1px, transparent 22px),
    linear-gradient(135deg, rgba(210,222,235,0.86), rgba(232,242,252,0.86));
  filter: saturate(0.95) contrast(1.06);
}
.mapPin{
  position:absolute;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(211,106,106,0.20);
  color: var(--ink);
  font-weight: 950;
  font-size: 11px;
  letter-spacing: 0.3px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
}
.pinDot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue-700);
  box-shadow: 0 0 0 6px rgba(29,118,194,0.14);
}
.mapPin.isDepag{top: 44%; left: 72%}
.mapPin.isKm13{top: 62%; left: 52%}
.mapPin.isKm13a{top: 46%; left: 40%}
.mapPin.isKm13b{top: 68%; left: 34%}

.bottom{
  background: linear-gradient(180deg, var(--blue-800), var(--blue-900));
  color: rgba(255,255,255,0.92);
  padding: 10px 14px;
  box-shadow: var(--shadow);
}
.bottomInner{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap: 10px;
  font-weight: 950;
  letter-spacing: 0.5px;
}
.bottomLabel{opacity: 0.92}
.bottomValue{
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 6px 10px;
  border-radius: 999px;
}

.progressScreen{
  flex: 1;
  min-height: 0;
  padding: 12px 14px;
  display:flex;
}

.progressPanel{
  flex: 1;
  min-height: 0;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}

.progressPanelTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px 10px 14px;
  border-bottom: 1px solid rgba(211,106,106,0.16);
  background:
    radial-gradient(640px 160px at 20% 40%, rgba(211,106,106,0.12), transparent 60%),
    radial-gradient(520px 160px at 82% 40%, rgba(241,196,15,0.10), transparent 60%),
    rgba(255,255,255,0.80);
}

.progressPanelHeading{
  font-weight: 950;
  letter-spacing: 0.6px;
  color: rgba(11,42,74,0.92);
}
.progressPanelHeadingAlt{
  font-weight: 950;
  letter-spacing: 0.6px;
  color: rgba(11,42,74,0.92);
  margin: 0 0 10px 0;
}

.progressTabs{
  display:flex;
  gap: 10px;
  padding: 6px;
  background: rgba(11,42,74,0.06);
  border: 1px solid rgba(11,42,74,0.12);
  border-radius: 14px;
}
.progressTab{
  border: 1px solid rgba(11,42,74,0.18);
  background: rgba(255,255,255,0.92);
  color: rgba(11,42,74,0.90);
  font-weight: 950;
  letter-spacing: 0.4px;
  padding: 10px 14px;
  border-radius: 12px;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  white-space: nowrap;
}
.progressTab.isActive{
  background: rgba(11,42,74,0.92);
  border-color: rgba(11,42,74,0.92);
  color: rgba(255,255,255,0.96);
}

.progressBody{
  position:relative;
  padding: 12px 14px 14px 14px;
  min-height: 0;
  height: calc(100% - 60px);
  background:
    radial-gradient(820px 420px at 10% 20%, rgba(255,255,255,0.80), transparent 62%),
    radial-gradient(720px 420px at 78% 60%, rgba(255,255,255,0.70), transparent 62%),
    rgba(255,255,255,0.68);
}

.progressMetaCard{
  position:absolute;
  left: 24px;
  top: 86px;
  width: 240px;
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(11,42,74,0.14);
  box-shadow: 0 16px 24px rgba(0,0,0,0.10);
  padding: 12px 12px 14px 12px;
  text-align:center;
}
.progressMetaLabel{
  font-weight: 900;
  color: rgba(11,42,74,0.70);
  letter-spacing: 0.4px;
  font-size: 12px;
}
.progressMetaValue{
  margin-top: 6px;
  font-weight: 950;
  color: rgba(11,42,74,0.92);
  font-size: 34px;
  line-height: 1;
}

.progressCharts{
  height: 100%;
  min-height: 0;
}
.progressChartWrap{
  height: 100%;
  min-height: 0;
}
.progressChart{
  width: 100%;
  height: 100%;
  min-height: 420px;
}

@media (max-width: 920px){
  .progressPanelTop{flex-direction:column; align-items:flex-start}
  .progressMetaCard{position:static; width: 100%; margin-bottom: 12px}
  .progressBody{height:auto}
  .progressChart{min-height: 420px}
}

.monitorScreen{
  flex: 1;
  min-height: 0;
  padding: 12px 14px;
  display:grid;
  grid-template-columns: 280px 170px 1fr;
  gap: 12px;
  align-items:stretch;
}

.monitorLeft,.monitorMid,.monitorRight{min-height:0}

.monitorCard{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  padding: 12px;
  margin-bottom: 12px;
}

.monitorLabel{
  font-weight: 950;
  letter-spacing: 0.4px;
  color: rgba(11,42,74,0.88);
  margin-bottom: 8px;
}

.monitorSelect{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(211,106,106,0.22);
  padding: 10px 12px;
  font-weight: 900;
  color: rgba(11,42,74,0.90);
  background: rgba(211,106,106,0.06);
}

.monitorCard.isGauge{padding: 12px 12px 10px 12px}
.monitorGaugeTitle{
  text-align:center;
  font-weight: 950;
  letter-spacing: 0.5px;
  color: rgba(11,42,74,0.92);
}
.monitorGauge{width:100%; height: 180px; margin-top: 10px}
.monitorGaugeFooter{
  display:flex;
  justify-content:center;
  padding-top: 6px;
}
.monitorGaugeBig{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(11,42,74,0.14);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 950;
  color: rgba(11,42,74,0.92);
}

.monitorLegend{
  margin-top: 8px;
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  align-items:center;
  color: rgba(11,42,74,0.78);
  font-weight: 850;
  font-size: 11px;
}
.monitorDot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display:inline-block;
  border: 1px solid rgba(0,0,0,0.10);
}
.monitorDot.isSun{background:#f1c40f}
.monitorDot.isDrizzle{background:#8ab6d6}
.monitorDot.isRain{background:#d36a6a}
.monitorWeather{width:100%; height: 220px; margin-top: 10px}

.kpiStack{
  display:flex;
  flex-direction:column;
  gap: 10px;
  height: 100%;
}
.kpiPill{
  border-radius: 16px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(11,42,74,0.14);
  box-shadow: var(--shadow);
  padding: 10px 10px 12px 10px;
  text-align:center;
}
.kpiPillLabel{
  font-weight: 950;
  letter-spacing: 0.4px;
  color: rgba(11,42,74,0.72);
  font-size: 12px;
}
.kpiPillValue{
  margin-top: 4px;
  font-weight: 950;
  color: rgba(11,42,74,0.92);
  font-size: 18px;
}
.kpiBig{
  border-radius: 16px;
  background: rgba(11,42,74,0.92);
  border: 1px solid rgba(11,42,74,0.92);
  box-shadow: var(--shadow);
  padding: 14px 10px;
  text-align:center;
  color: rgba(255,255,255,0.96);
}
.kpiBig.isStatus{background: rgba(11,42,74,0.86)}
.kpiBigLabel{
  font-weight: 950;
  letter-spacing: 0.5px;
  opacity: 0.92;
}
.kpiBigValue{
  margin-top: 8px;
  font-weight: 950;
  letter-spacing: 0.5px;
  font-size: 18px;
}

.monitorRight{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.monitorTableCard{
  flex: 1;
  min-height: 0;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.monitorTableHeader{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(11,42,74,0.06);
  border-bottom: 1px solid rgba(11,42,74,0.12);
  align-items:center;
}
.monitorTableTitle{
  font-weight: 950;
  letter-spacing: 0.4px;
  color: rgba(11,42,74,0.92);
  text-align:center;
}
.monitorTableCols{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  font-weight: 950;
  letter-spacing: 0.3px;
  color: rgba(11,42,74,0.78);
  font-size: 12px;
}
.monitorTableBody{
  padding: 10px 12px 12px 12px;
  overflow:auto;
  max-height: 330px;
}
.monitorRow{
  display:grid;
  grid-template-columns: 1fr repeat(4, 90px);
  gap: 8px;
  align-items:center;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(11,42,74,0.12);
  background: rgba(255,255,255,0.92);
  margin-bottom: 10px;
}
.monitorItem{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  min-width:0;
}
.monitorCode{
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(211,106,106,0.16);
  border: 1px solid rgba(211,106,106,0.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: rgba(11,42,74,0.92);
}
.monitorName{
  font-weight: 950;
  letter-spacing: 0.2px;
  color: rgba(11,42,74,0.88);
  font-size: 12px;
  line-height: 1.25;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.monitorNum{
  text-align:right;
  font-weight: 950;
  color: rgba(11,42,74,0.86);
  font-size: 12px;
}

.monitorSummaryCard{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  padding: 12px;
}
.monitorSummaryTitle{
  text-align:center;
  font-weight: 950;
  letter-spacing: 0.5px;
  color: rgba(11,42,74,0.92);
  margin-bottom: 10px;
}
.monitorSummaryGrid{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.monitorSummaryRow{
  display:grid;
  grid-template-columns: 1fr 120px;
  gap: 10px;
  align-items:center;
  border-radius: 14px;
  padding: 10px 10px;
  border: 1px solid rgba(11,42,74,0.12);
  background: rgba(255,255,255,0.92);
  font-weight: 900;
  color: rgba(11,42,74,0.82);
  font-size: 12px;
}
.monitorSummaryVal{
  text-align:right;
  font-weight: 950;
  color: rgba(11,42,74,0.92);
}

@media (max-width: 1100px){
  .monitorScreen{grid-template-columns: 1fr; overflow:auto}
  .monitorCard{margin-bottom: 12px}
  .monitorTableBody{max-height: none}
}

.docScreen{
  flex: 1;
  min-height: 0;
  padding: 12px 14px;
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 12px;
  align-items:stretch;
}

.docLeft,.docRight{min-height:0}

.docFilter{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  padding: 12px;
  display:flex;
  gap: 12px;
  align-items:center;
}
.docFilterIcon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(11,42,74,0.14), rgba(211,106,106,0.10));
  border: 1px solid rgba(11,42,74,0.12);
  position:relative;
}
.docFilterIcon::before{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(11,42,74,0.10);
}
.docFilterFields{
  flex: 1;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.docFieldLabel{
  font-weight: 950;
  letter-spacing: 0.4px;
  color: rgba(11,42,74,0.78);
  font-size: 12px;
  margin-bottom: 8px;
}
.docSelect{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(11,42,74,0.14);
  padding: 10px 12px;
  font-weight: 900;
  color: rgba(11,42,74,0.90);
  background: rgba(11,42,74,0.04);
}

.docKpiGrid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.docKpi{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  padding: 12px;
  text-align:center;
  position:relative;
}
.docKpiTitle{
  font-weight: 950;
  letter-spacing: 0.4px;
  color: rgba(11,42,74,0.84);
  font-size: 12px;
}
.docDonut{width:100%; height: 120px; margin-top: 6px}
.docKpiValue{
  margin-top: -4px;
  font-weight: 950;
  color: rgba(11,42,74,0.92);
}

.docSliderCard{
  margin-top: 12px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  padding: 10px;
}
.docSlider{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  background: rgba(11,42,74,0.06);
  border: 1px solid rgba(11,42,74,0.12);
  height: 224px;
}
.docSlideImg{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .18s ease, transform .25s ease;
}
.docSlideImg.isReady{
  opacity: 1;
  transform: scale(1);
}
.docSlideBtn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(4px);
  cursor:pointer;
  z-index: 2;
}
.docSlideBtn.isPrev{left: 10px}
.docSlideBtn.isNext{right: 10px}
.docSlideBtn::before{
  content:"";
  display:block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.docSlideBtn.isPrev::before{border-right: 10px solid rgba(255,255,255,0.92)}
.docSlideBtn.isNext::before{border-left: 10px solid rgba(255,255,255,0.92)}
.docSlideDots{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  justify-content:center;
}
.docDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,42,74,0.18);
  background: rgba(11,42,74,0.10);
  cursor:pointer;
}
.docDot.isActive{
  background: rgba(211,106,106,0.70);
  border-color: rgba(211,106,106,0.70);
}

.docRight{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.docTabs{
  align-self:center;
  display:flex;
  gap: 10px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(11,42,74,0.06);
  border: 1px solid rgba(11,42,74,0.12);
}
.docTab{
  border: 1px solid rgba(11,42,74,0.18);
  background: rgba(255,255,255,0.92);
  color: rgba(11,42,74,0.90);
  font-weight: 950;
  letter-spacing: 0.4px;
  padding: 10px 18px;
  border-radius: 12px;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.docTab.isActive{
  background: rgba(11,42,74,0.92);
  border-color: rgba(11,42,74,0.92);
  color: rgba(255,255,255,0.96);
}

.docPanel{
  flex: 1;
  min-height: 0;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  padding: 12px;
  overflow:hidden;
}
.docPanelTitle{
  text-align:center;
  font-weight: 950;
  letter-spacing: 0.5px;
  color: rgba(11,42,74,0.92);
  margin-bottom: 10px;
}
.docGrid{
  height: calc(100% - 34px);
  overflow:auto;
  padding-right: 6px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-content:start;
}
.docTile{
  border-radius: 16px;
  background: rgba(11,42,74,0.04);
  border: 1px solid rgba(11,42,74,0.12);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.docTile img{
  width:100%;
  height: 120px;
  object-fit: cover;
  display:block;
}
.docTile.isWide{grid-column: span 2}
.docTile.isWide img{height: 150px}
.docTileMeta{
  padding: 10px 10px 12px 10px;
  background: rgba(255,255,255,0.92);
}
.docTileLine{
  height: 10px;
  border-radius: 999px;
  background: rgba(11,42,74,0.10);
}

@media (max-width: 1100px){
  .docScreen{grid-template-columns: 1fr; overflow:auto}
  .docGrid{grid-template-columns: repeat(2, 1fr)}
}

@media (max-width: 520px){
  .docFilterFields{grid-template-columns: 1fr}
  .docKpiGrid{grid-template-columns: 1fr}
  .docGrid{grid-template-columns: 1fr}
  .docTile.isWide{grid-column: span 1}
}

.k3Screen{
  flex: 1;
  min-height: 0;
  padding: 12px 14px;
  display:flex;
}
.k3Panel{
  flex: 1;
  min-height: 0;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  padding: 12px;
  overflow:hidden;
}
.k3Top{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap: 12px;
}
.k3Filters{
  flex: 0 0 340px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  padding: 12px;
  display:grid;
  grid-template-columns: 44px 1fr 1fr;
  gap: 12px;
  align-items:center;
}
.k3FilterIcon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(11,42,74,0.14), rgba(211,106,106,0.10));
  border: 1px solid rgba(11,42,74,0.12);
  position:relative;
}
.k3FilterIcon::before{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(11,42,74,0.10);
}
.k3FieldLabel{
  font-weight: 950;
  letter-spacing: 0.4px;
  color: rgba(11,42,74,0.78);
  font-size: 12px;
  margin-bottom: 8px;
}
.k3Select{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(11,42,74,0.14);
  padding: 10px 12px;
  font-weight: 900;
  color: rgba(11,42,74,0.90);
  background: rgba(11,42,74,0.04);
}

.k3Kpis{
  flex: 1;
  display:grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 12px;
}
.k3Kpi{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  padding: 12px;
  display:grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items:center;
}
.k3KpiIcon{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(11,42,74,0.14);
  background: rgba(11,42,74,0.06);
  grid-row: 1 / span 2;
  position:relative;
}
.k3KpiIcon::before{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 999px;
  border: 3px solid rgba(11,42,74,0.70);
}
.k3KpiIcon.isClock::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  border: 3px solid rgba(11,42,74,0.70);
  box-shadow: inset 0 0 0 999px rgba(255,255,255,0);
}
.k3KpiIcon.isGroup::before{
  border-radius: 14px;
  border: 0;
  background:
    radial-gradient(circle at 36% 44%, rgba(11,42,74,0.70) 0 6px, transparent 7px),
    radial-gradient(circle at 62% 44%, rgba(11,42,74,0.70) 0 6px, transparent 7px),
    radial-gradient(circle at 49% 40%, rgba(11,42,74,0.70) 0 7px, transparent 8px),
    radial-gradient(22px 18px at 36% 68%, rgba(11,42,74,0.30) 0 99%, transparent 100%),
    radial-gradient(22px 18px at 62% 68%, rgba(11,42,74,0.30) 0 99%, transparent 100%),
    radial-gradient(26px 20px at 49% 70%, rgba(11,42,74,0.34) 0 99%, transparent 100%);
}
.k3KpiIcon.isPerson::before{
  border: 0;
  background:
    radial-gradient(circle at 50% 34%, rgba(11,42,74,0.72) 0 10px, transparent 11px),
    radial-gradient(30px 22px at 50% 70%, rgba(11,42,74,0.34) 0 99%, transparent 100%);
  border-radius: 18px;
}
.k3KpiValue{
  font-weight: 950;
  color: rgba(11,42,74,0.92);
  font-size: 22px;
  letter-spacing: 0.3px;
}
.k3KpiLabel{
  font-weight: 950;
  color: rgba(11,42,74,0.62);
  letter-spacing: 0.4px;
  font-size: 12px;
}

.k3TableWrap{
  margin-top: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(11,42,74,0.14);
  overflow:hidden;
  box-shadow: var(--shadow);
  background: rgba(255,255,255,0.92);
}
.k3TableHead{
  display:grid;
  grid-template-columns: 54px 140px 1.4fr 1.4fr 1fr 0.9fr 1fr 0.9fr 1fr;
  gap: 0;
  background: rgba(11,42,74,0.92);
  color: rgba(255,255,255,0.96);
  font-weight: 950;
  letter-spacing: 0.3px;
  font-size: 12px;
}
.k3TableHead > div{
  padding: 10px 10px;
  border-right: 1px solid rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
}
.k3TableHead > div:last-child{border-right:0}
.k3TableBody{
  max-height: 360px;
  overflow:auto;
}
.k3Row{
  display:grid;
  grid-template-columns: 54px 140px 1.4fr 1.4fr 1fr 0.9fr 1fr 0.9fr 1fr;
  gap: 0;
  border-bottom: 1px solid rgba(11,42,74,0.10);
}
.k3Row:nth-child(even){
  background: rgba(11,42,74,0.06);
}
.k3Cell{
  padding: 10px 10px;
  border-right: 1px solid rgba(11,42,74,0.10);
  font-weight: 900;
  color: rgba(11,42,74,0.88);
  display:flex;
  align-items:center;
  min-width:0;
}
.k3Cell:last-child{border-right:0}
.k3CellNum{
  justify-content:flex-end;
  font-variant-numeric: tabular-nums;
}
.k3MonthName{font-weight: 950}
.k3Num{justify-content:flex-end}

@media (max-width: 1100px){
  .k3Top{flex-direction:column}
  .k3Filters{grid-template-columns: 44px 1fr; grid-template-rows: auto auto}
  .k3Kpis{grid-template-columns: 1fr}
  .k3TableHead,.k3Row{grid-template-columns: 54px 140px 1fr 1fr 1fr 1fr 1fr 1fr 1fr}
}

.cdeScreen{
  flex: 1;
  min-height: 0;
  padding: 12px 14px;
  display:flex;
}
.cdePanel{
  flex: 1;
  min-height: 0;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  padding: 12px;
  overflow:hidden;
  position:relative;
}
.cdeTabs{
  position:absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  display:flex;
  gap: 10px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(11,42,74,0.06);
  border: 1px solid rgba(11,42,74,0.12);
  z-index: 2;
}
.cdeTab{
  border: 1px solid rgba(11,42,74,0.18);
  background: rgba(255,255,255,0.92);
  color: rgba(11,42,74,0.90);
  font-weight: 950;
  letter-spacing: 0.4px;
  padding: 10px 18px;
  border-radius: 12px;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  white-space: nowrap;
}
.cdeTab.isActive{
  background: rgba(11,42,74,0.92);
  border-color: rgba(11,42,74,0.92);
  color: rgba(255,255,255,0.96);
}
.cdeWrap{
  height: 100%;
  min-height: 0;
  padding-top: 50px;
}
.cdeTabPanel{height:100%; min-height:0}

.cdeGridAsset{
  height: 100%;
  min-height: 0;
  display:grid;
  grid-template-columns: 260px 1fr 150px;
  gap: 12px;
  align-items:stretch;
}
.cdeGridIssue{
  height: 100%;
  min-height: 0;
  display:grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
  align-items:stretch;
}

.cdeSide,.cdeSideRight,.cdeMain{min-height:0}
.cdeSideRight{display:flex;flex-direction:column;gap:12px}

.cdeCard{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  padding: 12px;
  margin-bottom: 12px;
}
.cdeCardLabel{
  font-weight: 950;
  letter-spacing: 0.4px;
  color: rgba(11,42,74,0.78);
  font-size: 12px;
  margin-bottom: 10px;
}
.cdeCardTitle{
  font-weight: 950;
  letter-spacing: 0.4px;
  color: rgba(11,42,74,0.92);
  margin-bottom: 10px;
  text-align:center;
}
.cdeDateRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cdeInput{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(11,42,74,0.14);
  padding: 10px 12px;
  font-weight: 900;
  color: rgba(11,42,74,0.90);
  background: rgba(11,42,74,0.04);
}
.cdeRange{
  margin-top: 10px;
  display:flex;
  gap: 10px;
}
.cdeRange input[type="range"]{width:100%}
.cdeSelect{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(11,42,74,0.14);
  padding: 10px 12px;
  font-weight: 900;
  color: rgba(11,42,74,0.90);
  background: rgba(11,42,74,0.04);
}
.cdeChartSm{width:100%; height: 180px}

.cdeMain{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  overflow:hidden;
}
.cdeMainTitle{
  text-align:center;
  font-weight: 950;
  letter-spacing: 0.5px;
  color: rgba(11,42,74,0.92);
  margin-bottom: 10px;
}
.cdeMainChartWrap{
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(11,42,74,0.12);
  padding: 10px;
}
.cdeChartLg{width:100%; height: 220px}

.cdeBrandCard{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(11,42,74,0.14);
  box-shadow: var(--shadow);
  padding: 12px;
  text-align:center;
}
.cdeBrandTop{
  font-weight: 950;
  color: rgba(11,42,74,0.78);
  letter-spacing: 0.4px;
  font-size: 12px;
  margin-bottom: 10px;
}
.cdeBrandLogo{
  height: 60px;
  border-radius: 16px;
  border: 1px solid rgba(11,42,74,0.12);
  background:
    linear-gradient(135deg, rgba(11,42,74,0.10), rgba(211,106,106,0.10));
  position:relative;
}
.cdeBrandLogo::before{
  content:"";
  position:absolute;
  inset: 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.70);
}
.cdeTotalCard{
  border-radius: var(--radius);
  background: #f1c40f;
  border: 1px solid rgba(11,42,74,0.10);
  box-shadow: var(--shadow);
  padding: 14px 12px;
  text-align:center;
}
.cdeTotalValue{
  font-weight: 950;
  color: rgba(11,42,74,0.92);
  font-size: 22px;
  line-height: 1.1;
}
.cdeTotalLabel{
  margin-top: 4px;
  font-weight: 950;
  color: rgba(11,42,74,0.70);
  letter-spacing: 0.5px;
  font-size: 11px;
}

.cdeTableCard{
  border-radius: var(--radius);
  border: 1px solid rgba(11,42,74,0.14);
  overflow:hidden;
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow);
}
.cdeTableHead{
  display:grid;
  gap: 0;
  background: rgba(11,42,74,0.92);
  color: rgba(255,255,255,0.96);
  font-weight: 950;
  letter-spacing: 0.3px;
  font-size: 12px;
}
.cdeTableHead > div{
  padding: 10px 10px;
  border-right: 1px solid rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
}
.cdeTableHead > div:last-child{border-right:0}
.cdeTableHeadAsset{grid-template-columns: 260px 1fr 1.3fr}
.cdeTableHeadIssue{grid-template-columns: 70px 120px 240px 160px 160px 160px 1fr 180px}
.cdeTableBody{
  max-height: 290px;
  overflow:auto;
}
.cdeRow{
  display:grid;
  gap: 0;
  border-bottom: 1px solid rgba(11,42,74,0.10);
}
.cdeRow:nth-child(even){background: rgba(11,42,74,0.06)}
.cdeRowAsset{grid-template-columns: 260px 1fr 1.3fr}
.cdeRowIssue{grid-template-columns: 70px 120px 240px 160px 160px 160px 1fr 180px}
.cdeCell{
  padding: 10px 10px;
  border-right: 1px solid rgba(11,42,74,0.10);
  font-weight: 900;
  color: rgba(11,42,74,0.86);
  font-size: 12px;
  display:flex;
  align-items:center;
  min-width:0;
}
.cdeCell:last-child{border-right:0}
.cdeNameCell{color: rgba(11,42,74,0.92)}
.cdeLink{
  color: rgba(29,118,194,0.92);
  font-weight: 900;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width:100%;
  display:block;
}

.cdeIssueTop{
  display:grid;
  grid-template-columns: 120px 140px repeat(3, 1fr);
  gap: 12px;
  align-items:stretch;
}
.cdeSmallCard{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  padding: 12px;
}
.cdeSmallLabel{
  font-weight: 950;
  letter-spacing: 0.4px;
  color: rgba(11,42,74,0.78);
  font-size: 12px;
  margin-bottom: 10px;
  text-align:center;
}
.cdeSmallTotal{
  border-radius: var(--radius);
  background: #f1c40f;
  border: 1px solid rgba(11,42,74,0.10);
  box-shadow: var(--shadow);
  padding: 12px;
  text-align:center;
}
.cdeSmallValue{
  font-weight: 950;
  color: rgba(11,42,74,0.92);
  font-size: 34px;
  line-height: 1;
}

.cdeDonutCard{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(11,42,74,0.14);
  box-shadow: var(--shadow);
  padding: 12px;
}
.cdeDonutTitle{
  text-align:center;
  font-weight: 950;
  letter-spacing: 0.5px;
  color: rgba(11,42,74,0.92);
  margin-bottom: 10px;
}
.cdeDonut{width:100%; height: 140px}

.cdeTypeCard{
  border-radius: var(--radius);
  background: #f1c40f;
  border: 1px solid rgba(11,42,74,0.10);
  box-shadow: var(--shadow);
  padding: 12px;
}
.cdeTypeTitle{
  text-align:center;
  font-weight: 950;
  letter-spacing: 0.6px;
  color: rgba(11,42,74,0.92);
  margin-bottom: 10px;
}
.cdeChartType{width:100%; height: 120px}

.cdeIssueTable{
  grid-column: 2 / span 1;
  min-height: 0;
}
.cdeGridIssue .cdeTableBody{max-height: 320px}

@media (max-width: 1200px){
  .cdeGridAsset{grid-template-columns: 1fr; overflow:auto}
  .cdeSideRight{flex-direction:row}
  .cdeGridIssue{grid-template-columns: 1fr; grid-template-rows: auto auto auto}
  .cdeIssueTop{grid-template-columns: 1fr 1fr}
  .cdeIssueTable{grid-column: auto}
  .cdeTableHeadIssue,.cdeRowIssue{grid-template-columns: 70px 120px 240px 160px 160px 160px 320px 180px}
}

@media (max-width: 1200px){
  .screen{grid-template-columns: 300px 1fr 340px}
  .scopeGrid{grid-template-columns: 1fr 240px}
}

@media (max-width: 1040px){
  .screen{
    grid-template-columns: 1fr;
    overflow:auto;
  }
  .rightCol{grid-template-rows:auto auto}
  .scopeGrid{grid-template-columns: 1fr}
  .chartScope{height: 260px}
  .topRow{grid-template-columns: 1fr}
  .logoGroup.isRight{justify-content:flex-start}
  .projectHeading{text-align:left}
  .techContent{inset: 16px 52px}
  .logoImg{max-width: 320px}
}

@media (max-width: 520px){
  .navBar{justify-content:flex-start}
  .tabsPrimary{flex-wrap:wrap}
  .progressGrid{grid-template-columns: 1fr}
  .techContent{inset: 16px 46px}
}

.landingScreen{
  flex: 1;
  min-height: 0;
  padding: 24px 14px 18px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.landingHero{
  width: min(980px, 100%);
  border-radius: 24px;
  background:
    radial-gradient(820px 320px at 18% 28%, rgba(211,106,106,0.20), transparent 60%),
    radial-gradient(820px 320px at 82% 62%, rgba(241,196,15,0.16), transparent 60%),
    rgba(255,255,255,0.88);
  border: 1px solid rgba(211,106,106,0.22);
  box-shadow: var(--shadow);
  padding: 26px 22px;
  text-align:center;
}

.landingBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,42,74,0.14);
  background: rgba(255,255,255,0.92);
  font-weight: 950;
  letter-spacing: 0.4px;
  color: rgba(11,42,74,0.78);
  font-size: 12px;
}

.landingTitle{
  margin: 14px 0 0 0;
  font-weight: 950;
  letter-spacing: 0.6px;
  color: rgba(11,42,74,0.92);
  font-size: 34px;
  line-height: 1.1;
}

.landingSubtitle{
  margin: 12px auto 0 auto;
  max-width: 720px;
  font-weight: 850;
  color: rgba(11,42,74,0.68);
  line-height: 1.5;
}

.landingActions{
  margin-top: 18px;
  display:flex;
  justify-content:center;
}

.landingBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(11,42,74,0.92);
  border: 1px solid rgba(11,42,74,0.92);
  color: rgba(255,255,255,0.96);
  font-weight: 950;
  letter-spacing: 0.4px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: 0 16px 22px rgba(11,42,74,0.18);
}
.landingBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 28px rgba(11,42,74,0.22);
}

@media (max-width: 520px){
  .landingTitle{font-size: 26px}
  .landingHero{padding: 20px 16px}
}