:root {
  --tg-black: #191b2c;
  --tg-navy: #282a3b;
  --tg-gray: #5e606f;
  --tg-border: #d4d5d6;
  --tg-blue: #027fff;
  --tg-orange: #ff723a;
  --tg-green: #1d9a73;
  --tg-red: #d33f49;
  --tg-blue-soft: #eaf4ff;
  --tg-orange-soft: #fff3ec;
  --tg-green-soft: #eaf8f3;
  --tg-red-soft: #fff0f0;
  --tg-white: #ffffff;
  --tg-shadow: 0 14px 38px rgba(25, 27, 44, 0.08);
}

.tg-grid,
.tg-status-row {
  box-sizing: border-box;
}

.tg-grid *,
.tg-grid *::before,
.tg-grid *::after,
.tg-status-row *,
.tg-status-row *::before,
.tg-status-row *::after {
  box-sizing: border-box;
}

.tg-grid {
  display: grid;
  gap: 18px;
  margin: 22px 0 28px;
}

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

.tg-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tg-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tg-card {
  min-width: 0;
  border: 1px solid var(--tg-border);
  border-radius: 8px;
  background: var(--tg-white);
  padding: 22px;
  box-shadow: var(--tg-shadow);
}

.tg-card--accent {
  border-top: 4px solid var(--tg-orange);
}

.tg-card--blue {
  border-top: 4px solid var(--tg-blue);
}

.tg-card--green {
  border-top: 4px solid var(--tg-green);
}

.tg-card--navy {
  border-top: 4px solid var(--tg-navy);
}

.tg-card h3 {
  margin: 0 0 8px;
  color: var(--tg-navy);
  font-size: 18px;
  line-height: 1.3;
}

.tg-card p,
.tg-card ul {
  margin: 0;
  color: var(--tg-gray);
  line-height: 1.6;
}

.tg-card ul {
  padding-left: 20px;
}

.tg-table-wrap {
  margin-top: 22px;
  overflow-x: auto;
  border: 1px solid var(--tg-border);
  border-radius: 8px;
  background: var(--tg-white);
  box-shadow: var(--tg-shadow);
}

.tg-status-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 28px;
}

.tg-status {
  min-width: 0;
  border: 1px solid var(--tg-border);
  border-radius: 8px;
  padding: 12px;
  background: var(--tg-white);
  font-size: 13px;
  font-weight: 700;
}

.tg-status span {
  display: block;
  margin-top: 4px;
  color: var(--tg-gray);
  font-weight: 400;
}

.tg-status--blue {
  border-color: var(--tg-blue);
  background: var(--tg-blue-soft);
}

.tg-status--orange {
  border-color: var(--tg-orange);
  background: var(--tg-orange-soft);
}

.tg-status--green {
  border-color: var(--tg-green);
  background: var(--tg-green-soft);
}

.tg-status--red {
  border-color: var(--tg-red);
  background: var(--tg-red-soft);
}

@media (max-width: 767px) {
  .tg-grid--2,
  .tg-grid--3,
  .tg-grid--4,
  .tg-status-row {
    grid-template-columns: 1fr;
  }
}