:root {
  --bg:          #F8F4F0;
  --surface:     #F4EDE4;
  --accent:      #2A8C8C;
  --accent-soft: #C97A5F;
  --text:        #3F2A1E;
  --text-light:  #6B5A4A;
  --border:      #E8D9C9;
  --shadow:      0 6px 20px rgba(42, 140, 140, 0.12);
  --shadow-soft: 0 3px 12px rgba(0, 0, 0, 0.07);
}

html, body {
  font-family: 'Nunito', system-ui, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-size: 16.6px;
  line-height: 1.82;
}

/* Cards & Rows */
.card, .thread-row, .side-card, .proj-canvas-banner, .stat-box {
  background: white !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-soft) !important;
  transition: all 0.3s ease !important;
}
.thread-row:hover, .side-card:hover, .proj-canvas-banner:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow) !important;
  border-color: var(--accent) !important;
}

/* Project Canvas */
.proj-canvas-banner {
  margin-bottom: 20px !important;
}
.proj-canvas-header {
  padding: 14px 18px !important;
}
.proj-canvas-content {
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  padding: 16px 18px !important;
}

/* Side Cards & Stats */
.side-card {
  padding: 18px !important;
}
.side-card-title {
  font-size: 12.5px !important;
  color: var(--text-light) !important;
  margin-bottom: 14px !important;
}
.stat-box {
  background: var(--surface) !important;
  padding: 14px 10px !important;
}
.stat-num {
  font-size: 22px !important;
  color: var(--accent) !important;
}

/* Buttons */
.btn-primary, .btn-secondary, button {
  border-radius: 12px !important;
  padding: 9px 18px !important;
  font-size: 15px !important;
}
.btn-danger {
  border-radius: 12px !important;
  color: #C15A4A !important;
  border-color: #E8B5B0 !important;
}
.btn-danger:hover {
  background: #FCEBEB !important;
}

/* Tabs */
.tab.active {
  border-bottom: 3px solid var(--accent) !important;
  color: var(--text) !important;
}

/* Thread rows */
.thread-row {
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  border-bottom: none !important;
}

/* Consistency for bubbles */
.bubble.assistant {
  background: var(--surface) !important;
  border-left: 5px solid var(--accent) !important;
  border-radius: 16px 24px 24px 16px !important;
}

.bubble.user {
  background: var(--accent-soft) !important;
  border-radius: 24px 16px 16px 24px !important;
}