:root {
  --wt-split-bg: rgba(8, 17, 28, 0.84);
  --wt-split-line: rgba(246, 213, 122, 0.18);
  --wt-split-line-strong: rgba(246, 213, 122, 0.42);
  --wt-split-text: #f7f1e1;
  --wt-split-muted: rgba(247, 241, 225, 0.68);
  --wt-split-green: #8be28f;
  --wt-split-red: #ff8d8d;
  --wt-split-blue: #93c5fd;
}

.wt-split-page {
  width: min(1180px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 92px) 0 48px;
}

.wt-split-header {
  margin-bottom: 24px;
}

.wt-split-header h1 {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 4.8rem);
  line-height: 0.92;
}

.wt-split-header p {
  max-width: 760px;
}

.wt-split-kicker {
  margin: 0 0 10px;
  color: var(--wt-split-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wt-split-stack {
  display: grid;
  gap: 18px;
}

.wt-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

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

.wt-split-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--wt-split-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(147, 197, 253, 0.12), transparent 26rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    var(--wt-split-bg);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.28);
}

.wt-split-card h2 {
  margin: 0 0 8px;
  color: var(--wt-split-text);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.wt-split-card p {
  color: var(--wt-split-muted);
}

.wt-split-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.wt-split-stats,
.wt-split-meta-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.wt-split-stats > div,
.wt-split-meta-list > div {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.wt-split-stats span,
.wt-split-meta-list span {
  display: block;
  margin-bottom: 6px;
  color: var(--wt-split-muted);
  font-size: 0.78rem;
}

.wt-split-stats strong,
.wt-split-meta-list strong {
  display: block;
  color: var(--wt-split-text);
  overflow-wrap: anywhere;
}

.wt-split-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.wt-split-primary-link,
.wt-split-secondary-link,
.wt-split-secondary,
.wt-split-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--wt-split-line-strong);
  text-decoration: none;
  color: var(--wt-split-text);
  background: rgba(255, 255, 255, 0.06);
  font-weight: 800;
  cursor: pointer;
}

.wt-split-primary-link {
  background: linear-gradient(135deg, #f6d57a, #c48b24);
  color: #161109;
}

.wt-split-danger {
  border-color: rgba(255, 141, 141, 0.5);
  background: rgba(127, 29, 29, 0.28);
}

.wt-split-banner {
  color: var(--wt-split-text);
  border-color: rgba(255, 141, 141, 0.4);
  background:
    radial-gradient(circle at top right, rgba(255, 141, 141, 0.14), transparent 22rem),
    rgba(74, 12, 12, 0.64);
}

.wt-split-chart-card {
  min-height: 150px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  background: rgba(2, 8, 18, 0.66);
}

.wt-split-sparkline {
  width: 100%;
  height: 120px;
}

.wt-split-sparkline-lg {
  height: 220px;
}

.wt-split-line {
  fill: none;
  stroke: #f6d57a;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wt-split-table-wrap {
  overflow: auto;
  margin-top: 14px;
}

.wt-split-table {
  width: 100%;
  border-collapse: collapse;
}

.wt-split-table th,
.wt-split-table td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  white-space: nowrap;
}

.wt-split-table th {
  color: var(--wt-split-muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wt-split-calendar-mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.wt-split-mini-day,
.wt-split-day {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--wt-split-text);
  padding: 12px;
  cursor: pointer;
  text-align: left;
}

.wt-split-mini-day strong,
.wt-split-day strong {
  display: block;
  font-size: 1rem;
}

.wt-split-mini-day span,
.wt-split-day span,
.wt-split-mini-day small,
.wt-split-day small {
  display: block;
  margin-top: 4px;
}

.wt-split-mini-day.green,
.wt-split-day.green {
  border-color: rgba(139, 226, 143, 0.4);
  background: rgba(17, 53, 33, 0.7);
}

.wt-split-mini-day.red,
.wt-split-day.red {
  border-color: rgba(255, 141, 141, 0.4);
  background: rgba(71, 18, 18, 0.72);
}

.wt-split-mini-day.flat,
.wt-split-day.flat {
  background: rgba(40, 40, 40, 0.42);
}

.wt-split-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
  color: var(--wt-split-muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.wt-split-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.wt-split-day {
  min-height: 110px;
}

.wt-split-day-pad {
  visibility: hidden;
}

.wt-split-inline-note {
  color: var(--wt-split-muted);
}

.is-positive {
  color: var(--wt-split-green);
}

.is-negative {
  color: var(--wt-split-red);
}

.is-neutral {
  color: var(--wt-split-muted);
}

pre {
  margin: 0;
  padding: 14px;
  border-radius: 18px;
  background: rgba(2, 8, 18, 0.72);
  color: #dbeafe;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wt-login-view-choice {
  margin: 14px 0 10px;
}

.wt-login-view-choice p {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wt-login-view-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.wt-login-view-choice-grid button,
.wt-login-view-choice-active {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 10px;
  background: rgba(80, 120, 220, 0.2);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.wt-login-view-choice-active {
  outline: 2px solid #f7d785;
  background: rgba(247, 215, 133, 0.3);
}

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

@media (max-width: 760px) {
  .wt-split-page {
    width: min(100vw - 1rem, 100%);
    padding-top: calc(env(safe-area-inset-top, 0px) + 82px);
  }

  .wt-split-grid,
  .wt-split-grid-overview,
  .wt-split-stats,
  .wt-split-meta-list,
  .wt-split-calendar-mini,
  .wt-split-calendar-grid,
  .wt-split-weekdays,
  .wt-login-view-choice-grid {
    grid-template-columns: 1fr;
  }

  .wt-split-day {
    min-height: auto;
  }
}