.txw-app {
  color: #111315;
}

.txw-hero,
.txw-panel {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 19, 21, 0.08);
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.04),
    0 2px 6px rgba(15, 23, 42, 0.03);
}

.txw-form-card,
.txw-stat-card,
.txw-toggle-card,
.txw-group-panel {
  background: rgba(249, 250, 251, 0.92);
  border: 1px solid rgba(17, 19, 21, 0.07);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.025);
}

.txw-hero:hover,
.txw-panel:hover,
.txw-form-card:hover,
.txw-stat-card:hover,
.txw-toggle-card:hover,
.txw-group-panel:hover {
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.05),
    0 4px 10px rgba(15, 23, 42, 0.035);
}

.txw-hero__eyebrow,
.txw-panel__eyebrow,
.txw-inline-select__label,
.txw-field__label,
.txw-stat-card__label {
  color: rgba(17, 19, 21, 0.45);
  letter-spacing: 0.02em;
}

.txw-hero__title,
.txw-panel__title,
.txw-section-heading__title,
.txw-stat-card__value,
.txw-toggle-card__label {
  color: #111315;
  font-weight: 600;
}

.txw-hero__text,
.txw-panel__text,
.txw-section-heading__text,
.txw-toggle-card__hint {
  color: rgba(17, 19, 21, 0.58);
}

.txw-panel__badge,
.txw-chip {
  color: rgba(17, 19, 21, 0.68);
  background: rgba(244, 247, 249, 0.96);
  border: 1px solid rgba(17, 19, 21, 0.07);
}

.txw-group-panel__title {
  color: #111315;
  font-weight: 600;
}

.txw-chip--accent {
  color: #35546d;
  background: rgba(232, 239, 245, 0.95);
  border-color: rgba(82, 116, 144, 0.12);
}

.txw-input,
.txw-select {
  color: #111315;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(17, 19, 21, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.txw-select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23606b75' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.txw-input::placeholder {
  color: rgba(17, 19, 21, 0.32);
}

.txw-input:hover,
.txw-select:hover {
  border-color: rgba(17, 19, 21, 0.16);
  background-color: #ffffff;
}

.txw-input:focus,
.txw-select:focus {
  outline: none;
  border-color: rgba(94, 126, 152, 0.45);
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(218, 228, 236, 0.75);
}

.txw-group-button {
  color: rgba(17, 19, 21, 0.78);
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(17, 19, 21, 0.07);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

.txw-group-button:hover {
  color: #111315;
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(17, 19, 21, 0.12);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.txw-group-button--active {
  color: #2f495f;
  background: rgba(232, 239, 245, 0.96);
  border-color: rgba(82, 116, 144, 0.14);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.txw-toggle__slider {
  background: rgba(17, 19, 21, 0.12);
  border: 1px solid rgba(17, 19, 21, 0.08);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.txw-toggle__slider::after {
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.12),
    0 2px 8px rgba(15, 23, 42, 0.08);
}

.txw-toggle__control:focus + .txw-toggle__slider {
  box-shadow: 0 0 0 4px rgba(218, 228, 236, 0.75);
}

.txw-toggle__control:checked + .txw-toggle__slider {
  background: rgba(103, 133, 156, 0.92);
  border-color: rgba(103, 133, 156, 0.92);
}

.txw-button {
  border: 1px solid transparent;
  color: #ffffff;
  background: #17191c;
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.08),
    0 2px 6px rgba(15, 23, 42, 0.05);
}

.txw-button:hover {
  transform: translateY(-1px);
  background: #202327;
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.1),
    0 4px 8px rgba(15, 23, 42, 0.06);
}

.txw-button:focus {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(218, 228, 236, 0.75),
    0 8px 20px rgba(15, 23, 42, 0.1);
}

.txw-button--secondary {
  color: #1d2125;
  background: rgba(245, 247, 249, 0.98);
  border-color: rgba(17, 19, 21, 0.08);
  box-shadow: none;
}

.txw-button--secondary:hover {
  background: rgba(239, 243, 246, 1);
  border-color: rgba(17, 19, 21, 0.12);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.txw-button--danger {
  color: #33424f;
  background: rgba(233, 239, 243, 0.98);
  border-color: rgba(92, 111, 126, 0.12);
  box-shadow: none;
}

.txw-button--danger:hover {
  background: rgba(225, 233, 239, 1);
  border-color: rgba(92, 111, 126, 0.2);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
