:root {
  --tt-bg: #fff8f1;
  --tt-surface: #ffffff;
  --tt-surface-soft: #fff1e8;
  --tt-surface-yellow: #fff3c4;
  --tt-surface-teal: #dff7f3;
  --tt-primary: #ff6b57;
  --tt-primary-hover: #e85a47;
  --tt-secondary: #2ec4b6;
  --tt-secondary-hover: #22aa9d;
  --tt-accent: #ffd166;
  --tt-text: #2f2a26;
  --tt-muted: #6f665f;
  --tt-border: rgba(255, 107, 87, 0.16);
  --tt-shadow: 0 16px 40px rgba(255, 107, 87, 0.08);
}

body {
  color: var(--tt-text);
  background:
    radial-gradient(circle at top left, rgba(255, 209, 102, 0.42), transparent 22%),
    radial-gradient(circle at top right, rgba(46, 196, 182, 0.24), transparent 22%),
    linear-gradient(180deg, #fffaf5 0%, var(--tt-bg) 100%);
  min-height: 100vh;
}

a {
  color: var(--tt-primary-hover);
}

a:hover {
  color: #ca4938;
}

.app-shell {
  padding-bottom: 3rem;
}

.app-navbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 107, 87, 0.12);
  box-shadow: 0 12px 30px rgba(255, 107, 87, 0.06);
}

.app-brand {
  color: var(--tt-primary) !important;
  letter-spacing: 0.02em;
}

.app-link {
  color: var(--tt-muted) !important;
  font-weight: 600;
}

.app-link:hover {
  color: var(--tt-primary) !important;
}

.card {
  border: 1px solid var(--tt-border) !important;
  border-radius: 1.1rem;
  box-shadow: var(--tt-shadow);
}

.card-body {
  position: relative;
}

.hero-card,
.page-card {
  background: var(--tt-surface);
}

.section-card {
  background: var(--tt-surface);
}

.scoreboard-card {
  background: var(--tt-surface-yellow);
}

.discussion-card {
  background: var(--tt-surface);
}

.soft-block {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 107, 87, 0.1);
  border-radius: 0.95rem;
}

.activity-card {
  background: #fff3ed;
  border: 1px solid rgba(255, 107, 87, 0.16);
  border-radius: 0.95rem;
}

.badge.text-bg-light {
  background: rgba(255, 209, 102, 0.32) !important;
  color: var(--tt-text) !important;
}

.badge.text-bg-success {
  background: #7ad66e !important;
  color: #17351b !important;
}

.badge.text-bg-secondary {
  background: #d9d0ca !important;
  color: #4b433d !important;
}

.badge.text-bg-primary {
  background: var(--tt-primary) !important;
}

.btn {
  border-radius: 999px;
  font-weight: 600;
}

.btn-primary {
  background: var(--tt-primary);
  border-color: var(--tt-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--tt-primary-hover) !important;
  border-color: var(--tt-primary-hover) !important;
}

.btn-outline-secondary {
  color: var(--tt-secondary-hover);
  border-color: rgba(46, 196, 182, 0.45);
  background: rgba(255, 255, 255, 0.8);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  color: #ffffff !important;
  background: var(--tt-secondary) !important;
  border-color: var(--tt-secondary) !important;
}

.form-control,
.form-select {
  border-radius: 0.9rem;
  border-color: rgba(255, 107, 87, 0.22);
  background: rgba(255, 255, 255, 0.94);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(255, 107, 87, 0.58);
  box-shadow: 0 0 0 0.25rem rgba(255, 107, 87, 0.14);
}

.alert {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 12px 28px rgba(47, 42, 38, 0.08);
}

.alert-success {
  background: rgba(122, 214, 110, 0.2);
  color: #204a24;
}

.alert-info {
  background: rgba(46, 196, 182, 0.18);
  color: #1f5d56;
}

.alert-warning {
  background: rgba(255, 209, 102, 0.24);
  color: #6f4b00;
}

.alert-danger {
  background: rgba(255, 107, 87, 0.18);
  color: #7a2d21;
}

.text-body-secondary,
.small.text-body-secondary {
  color: var(--tt-muted) !important;
}

.scoreboard-row {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 107, 87, 0.12);
  border-radius: 0.9rem;
}

.reaction-dropdown {
  width: 320px;
  max-height: 260px;
  overflow: auto;
  z-index: 10;
  background: rgba(255, 255, 255, 0.98);
}

.reaction-summary {
  cursor: pointer;
  list-style: none;
}

.reaction-summary::-webkit-details-marker {
  display: none;
}

.reaction-chip {
  font-size: 0.95rem;
}

@media (max-width: 767.98px) {
  .reaction-dropdown {
    width: 280px;
    max-width: calc(100vw - 3rem);
  }
}