.si-shell {
  --si-ink: #07182f;
  --si-blue: #003f73;
  --si-green: #008856;
  --si-red: #c73900;
  --si-amber: #b47a00;
  --si-line: #c8d8e8;
  color: var(--si-ink);
}

.si-hero {
  background:
    linear-gradient(135deg, rgba(0, 63, 115, 0.08), rgba(0, 136, 86, 0.08)),
    #f8fbff;
}

.si-title-row,
.si-help-title,
.si-method-grid,
.si-mini-row,
.si-bar-row > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.si-help-title {
  margin: 0;
}

.si-help-button {
  width: 28px;
  height: 28px;
  border: 1px solid #9bb0c6;
  background: #fff;
  color: var(--si-blue);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.si-method-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
  gap: 16px;
  align-items: stretch;
}

.si-method-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.si-method-copy p {
  max-width: 920px;
}

.si-method-note {
  margin: 8px 0 0;
  color: #3f5774;
  font-size: 0.94rem;
  font-weight: 800;
}

.si-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.si-method-grid article,
.si-kpi-grid article,
.si-mini-row,
.si-watch-card {
  border: 1px solid var(--si-line);
  background: rgba(255, 255, 255, 0.78);
}

.si-method-grid article {
  min-height: 94px;
  padding: 14px;
}

.si-method-grid strong,
.si-method-grid span {
  display: block;
}

.si-method-grid span,
.si-kpi-grid em,
.si-mini-row em,
.si-table span {
  color: #425b78;
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 700;
}

.si-kpi-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.si-kpi-grid article {
  min-height: 112px;
  padding: 16px;
}

.si-kpi-card {
  position: relative;
  overflow: hidden;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.si-kpi-card:hover,
.si-kpi-card:focus-within {
  border-color: #86a5c3;
  box-shadow: 0 12px 28px rgba(7, 24, 47, 0.08);
  transform: translateY(-1px);
}

.si-kpi-card > a {
  display: flex;
  height: 100%;
  min-height: 112px;
  flex-direction: column;
  justify-content: center;
  padding: 14px 12px;
  color: inherit;
  text-decoration: none;
}

.si-kpi-grid .si-kpi-card {
  padding: 0;
}

.si-kpi-card .si-help-button {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 23px;
  height: 23px;
  border-color: #adc0d4;
  color: #0b3f72;
  font-size: 0.82rem;
  box-shadow: 0 1px 0 rgba(7, 24, 47, 0.05);
}

.si-kpi-grid span,
.si-table th,
.si-module .intel-panel-head span {
  color: #4c6381;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.si-kpi-card span {
  padding-right: 26px;
  line-height: 1.2;
}

.si-kpi-grid strong {
  display: block;
  margin: 8px 0 3px;
  font-size: clamp(1.35rem, 1.7vw, 2rem);
  line-height: 1;
}

.si-kpi-card em {
  line-height: 1.25;
}

.si-kpi-grid-detail {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.si-positive {
  color: var(--si-green);
}

.si-negative {
  color: var(--si-red);
}

.si-radar-grid,
.si-chart-grid,
.si-positioning-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.si-chart-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.si-positioning-grid {
  margin: 0;
}

.si-positioning-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--si-line);
  padding: 14px;
}

.si-positioning-card strong,
.si-positioning-card span {
  display: block;
}

.si-positioning-card span {
  color: #425b78;
  font-size: 0.86rem;
  font-weight: 750;
}

.si-positioning-card em {
  color: var(--si-blue);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 950;
}

.si-positioning-card .si-bar-track {
  grid-column: 1 / -1;
}

.si-module {
  min-height: 280px;
}

.si-mini-row {
  justify-content: space-between;
  padding: 10px 0;
  border-width: 0 0 1px;
  color: inherit;
  text-decoration: none;
}

.si-mini-row strong {
  min-width: 54px;
}

.si-mini-row span {
  min-width: 42px;
  color: var(--si-blue);
  font-size: 1.15rem;
  font-weight: 900;
  text-align: right;
}

.si-mini-row em {
  flex: 1;
  text-align: right;
}

.si-bars {
  display: grid;
  gap: 12px;
}

.si-bar-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) 1.4fr;
  gap: 16px;
  align-items: center;
}

.si-bar-row a,
.si-symbol {
  color: var(--si-blue);
  font-weight: 900;
  text-decoration: none;
}

.si-bar-row div:first-child {
  justify-content: space-between;
}

.si-bar-track {
  height: 10px;
  border: 1px solid var(--si-line);
  background: #edf4fa;
}

.si-bar-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--si-blue), var(--si-green));
}

.si-table-wrap {
  overflow-x: auto;
}

.si-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.si-table th,
.si-table td {
  padding: 12px;
  text-align: left;
  white-space: nowrap;
}

.si-table th {
  background: #edf3f9;
}

.si-table td {
  border-top: 1px solid var(--si-line);
  border-bottom: 1px solid var(--si-line);
  background: #fff;
  font-weight: 800;
}

.si-table td:first-child {
  border-left: 1px solid var(--si-line);
}

.si-table td:last-child {
  border-right: 1px solid var(--si-line);
}

.si-symbol,
.si-table span {
  display: block;
}

.si-pagination {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
  font-weight: 800;
}

.si-pagination a {
  border: 1px solid var(--si-line);
  padding: 8px 12px;
  color: var(--si-blue);
  text-decoration: none;
}

.si-disclaimer {
  border: 1px solid var(--si-line);
  background: #f7fafc;
  padding: 12px;
  color: #3b526f;
  font-weight: 800;
}

.si-detail-brief {
  border-left: 5px solid var(--si-blue);
}

.si-tone-positive {
  border-color: rgba(0, 136, 86, 0.35) !important;
  background: rgba(0, 136, 86, 0.06) !important;
}

.si-tone-negative {
  border-color: rgba(199, 57, 0, 0.34) !important;
  background: rgba(199, 57, 0, 0.06) !important;
}

.si-tone-warning {
  border-color: rgba(180, 122, 0, 0.34) !important;
  background: rgba(180, 122, 0, 0.07) !important;
}

.si-tone-neutral {
  border-color: var(--si-line) !important;
}

.si-chart-card svg {
  width: 100%;
  height: auto;
  border: 1px solid var(--si-line);
  background: linear-gradient(180deg, #fff, #f6fbfa);
}

.si-chart-card line {
  stroke: #d8e4ee;
  stroke-width: 1;
}

.si-chart-card polyline {
  fill: none;
  stroke: var(--si-blue);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.si-watch-card p {
  margin-bottom: 0;
  color: #354e6b;
  font-weight: 800;
}

.si-modal[hidden] {
  display: none;
}

.si-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 15, 32, 0.48);
}

.si-modal-card {
  width: min(520px, 100%);
  border: 1px solid var(--si-line);
  background: #fff;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.si-modal-card button {
  float: right;
  border: 1px solid var(--si-line);
  background: #fff;
  font-size: 1.25rem;
  line-height: 1;
}

@media (max-width: 1100px) {
  .si-radar-grid,
  .si-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .si-method-strip,
  .si-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1500px) and (min-width: 1101px) {
  .si-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .si-kpi-grid,
  .si-radar-grid,
  .si-method-grid,
  .si-method-strip,
  .si-chart-grid,
  .si-positioning-grid,
  .si-bar-row {
    grid-template-columns: 1fr;
  }

  .si-table th,
  .si-table td {
    padding: 10px;
  }
}