﻿html, body {
  height: 100%;
}

body {
  margin: 0;
}

/* App shell layout */
.rt-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at top, #0b1120 0, #020617 40%, #000 100%);
  color: var(--rt-color-text);
}

.rt-app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(18px);
}

.rt-app-main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: var(--rt-space-6) var(--rt-space-4) var(--rt-space-6);
}

.rt-app-content {
  width: 100%;
  max-width: 1120px;
  background: rgba(15, 23, 42, 0.95);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-shadow-md);
  padding: var(--rt-space-5);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

@media (max-width: 768px) {
  .rt-app-main {
    padding: var(--rt-space-4) var(--rt-space-3);
  }

  .rt-app-content {
    padding: var(--rt-space-4);
    border-radius: var(--rt-radius-md);
  }
}

/* Top navigation */
.rt-topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--rt-space-3) var(--rt-space-4);
  color: var(--rt-color-text);
}

.rt-topnav-left {
  display: flex;
  align-items: center;
  gap: var(--rt-space-4);
}

.rt-topnav-right {
  display: flex;
  align-items: center;
  gap: var(--rt-space-3);
}

.rt-topnav-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.rt-topnav-logo-img {
  height: 4.5rem;
  width: auto;
  mix-blend-mode: screen;
}

.rt-topnav-links {
  display: flex;
  align-items: center;
  gap: var(--rt-space-2);
}

.rt-topnav-link {
  position: relative;
  padding: 0.45rem 0.9rem;
  border-radius: var(--rt-radius-full);
  font-size: var(--rt-text-sm);
  color: var(--rt-color-text-muted);
  text-decoration: none;
}

.rt-topnav-link.active {
  color: var(--rt-color-text);
  background: rgba(37, 99, 235, 0.16);
}

.rt-topnav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #a855f7, #f97316);
  opacity: 0;
  transform: scaleX(0.3);
  transform-origin: center;
  transition: opacity 160ms ease, transform 160ms ease;
}

.rt-topnav-link.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.rt-topnav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.25rem;
  margin-right: -0.25rem;
}

.rt-topnav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin-block: 3px;
  background: var(--rt-color-text);
  border-radius: 999px;
}

@media (max-width: 768px) {
  .rt-topnav {
    padding-inline: var(--rt-space-3);
  }

  .rt-topnav-links {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    padding: 0.5rem 1rem 0.75rem;
    background: rgba(15, 23, 42, 0.98);
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
    display: none;
  }

  .rt-topnav-links--open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .rt-topnav-toggle {
    display: inline-flex;
    flex-direction: column;
  }
}

/* Buttons */
.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--rt-radius-full);
  border: 1px solid transparent;
  font-size: var(--rt-text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease, border-color 140ms ease, transform 80ms ease;
}

.rt-btn-primary {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border-color: transparent;
  color: white;
  box-shadow: 0 14px 40px rgba(37, 99, 235, 0.55);
}

.rt-btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #4338ca);
  box-shadow: 0 16px 44px rgba(37, 99, 235, 0.7);
}

.rt-btn-secondary {
  background: rgba(15, 23, 42, 0.9);
  color: var(--rt-color-text);
  border-color: rgba(148, 163, 184, 0.6);
}

.rt-btn-secondary:hover {
  background: rgba(15, 23, 42, 1);
  border-color: rgba(248, 250, 252, 0.7);
}

.rt-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--rt-color-text-muted);
}

.rt-btn-ghost:hover {
  background: rgba(15, 23, 42, 0.8);
  color: var(--rt-color-text);
}

.rt-btn-lg {
  padding: 0.65rem 1.4rem;
  font-size: var(--rt-text-md);
}

.rt-btn:focus-visible {
  outline: 2px solid #e5e7eb;
  outline-offset: 2px;
}

.rt-btn:disabled,
.rt-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Avatar and dropdown */
.rt-avatar-button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.rt-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--rt-radius-full);
  background: radial-gradient(circle at 30% 10%, #e5e7eb 0, #9ca3af 18%, #4f46e5 60%, #0ea5e9 100%);
  color: #020617;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.8);
  object-fit: cover;
  overflow: hidden;
}

.rt-avatar--lg {
  width: 4rem;
  height: 4rem;
  font-size: 1.5rem;
  object-fit: cover;
}

.rt-avatar--placeholder {
  background: var(--rt-color-surface-alt);
  color: var(--rt-color-text-muted);
}

.rt-user-menu {
  position: relative;
}

.rt-menu {
  position: absolute;
  right: 0;
  margin-top: 0.4rem;
  padding: 0.35rem;
  list-style: none;
  background: rgba(15, 23, 42, 0.98);
  border-radius: var(--rt-radius-md);
  box-shadow: var(--rt-shadow-md);
  border: 1px solid rgba(148, 163, 184, 0.4);
  min-width: 160px;
}

.rt-menu-item {
  display: block;
  padding: 0.45rem 0.75rem;
  border-radius: var(--rt-radius-sm);
  color: var(--rt-color-text);
  text-decoration: none;
  font-size: var(--rt-text-sm);
}

.rt-menu-item:hover,
.rt-menu-item:focus-visible {
  background: rgba(37, 99, 235, 0.16);
  outline: none;
}

button.rt-menu-item {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

/* Landing page */
.rt-landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--rt-color-text);
}

.rt-landing-hero {
  padding: var(--rt-space-4) var(--rt-space-4) var(--rt-space-6);
}

.rt-landing-nav {
  max-width: 1120px;
  margin: 0 auto var(--rt-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rt-landing-logo {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rt-landing-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--rt-space-3);
}

.rt-landing-hero-content {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.4fr);
  gap: var(--rt-space-6);
  align-items: center;
}

.rt-landing-hero-copy h1 {
  font-size: clamp(2.3rem, 3.1vw, 2.9rem);
  letter-spacing: -0.04em;
  margin-bottom: var(--rt-space-3);
}

.rt-landing-hero-copy p {
  max-width: 34rem;
  font-size: var(--rt-text-md);
  color: var(--rt-color-text-muted);
}

.rt-landing-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-3);
  margin-block: var(--rt-space-4);
}

.rt-landing-highlights {
  display: grid;
  gap: 0.35rem;
  padding-left: 1.1rem;
  margin: 0;
  font-size: var(--rt-text-sm);
  color: var(--rt-color-text-muted);
}

.rt-landing-hero-visual {
  position: relative;
  min-height: 260px;
}

.rt-hero-card {
  position: absolute;
  background: radial-gradient(circle at top, #1d283a 0, #020617 60%);
  border-radius: var(--rt-radius-lg);
  padding: var(--rt-space-4);
  box-shadow: var(--rt-shadow-lg);
  border: 1px solid rgba(148, 163, 184, 0.45);
}

.rt-hero-card--list {
  inset-inline-start: 0;
  top: 0;
  width: 260px;
}

.rt-hero-card--calendar {
  inset-inline-end: 6%;
  bottom: 0;
  width: 260px;
}

.rt-hero-card-header {
  font-size: var(--rt-text-sm);
  font-weight: 600;
  margin-bottom: var(--rt-space-3);
}

.rt-hero-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.35rem;
  font-size: var(--rt-text-sm);
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 0.4rem;
  border: 2px solid rgba(148, 163, 184, 0.8);
}

.dot--complete {
  background: #22c55e;
  border-color: #22c55e;
}

.rt-hero-calendar-grid {
  display: grid;
  gap: 0.45rem;
}

.pill {
  padding: 0.25rem 0.6rem;
  border-radius: var(--rt-radius-full);
  font-size: var(--rt-text-xs);
}

.pill--primary {
  background: rgba(59, 130, 246, 0.2);
  color: #bfdbfe;
}

.pill--secondary {
  background: rgba(45, 212, 191, 0.2);
  color: #ccfbf1;
}

.pill--accent {
  background: rgba(244, 114, 182, 0.24);
  color: #f9a8d4;
}

.rt-section {
  padding: 0 var(--rt-space-4) var(--rt-space-6);
}

.rt-section--alt {
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 55%);
}

.rt-section-header {
  max-width: 1120px;
  margin: 0 auto var(--rt-space-4);
}

.rt-section-header h2 {
  font-size: var(--rt-text-2xl);
  margin-bottom: 0.35rem;
}

.rt-section-header p {
  max-width: 34rem;
  color: var(--rt-color-text-muted);
}

.rt-feature-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rt-space-4);
}

.rt-card {
  background: rgba(15, 23, 42, 0.95);
  border-radius: var(--rt-radius-lg);
  padding: var(--rt-space-4);
  box-shadow: var(--rt-shadow-sm);
  border: 1px solid rgba(148, 163, 184, 0.45);
}

.rt-card--form {
  max-width: 100%;
}

.rt-card--sub {
  background: rgba(15, 23, 42, 0.9);
}

.rt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-space-3);
  margin-bottom: var(--rt-space-3);
}

.rt-card-title {
  margin: 0;
}

.rt-card-subtitle {
  margin: 0.15rem 0 0;
  font-size: var(--rt-text-sm);
  color: var(--rt-color-text-muted);
}

.rt-form {
  margin-top: var(--rt-space-3);
}

.rt-label {
  font-size: var(--rt-text-sm);
  color: var(--rt-color-text-muted);
}

.rt-input {
  background-color: rgba(15, 23, 42, 0.9);
  border-radius: var(--rt-radius-md);
  border-color: rgba(148, 163, 184, 0.6);
  color: var(--rt-color-text);
}

.rt-input:focus {
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.7);
}

.rt-validation-summary {
  margin-bottom: var(--rt-space-3);
}

.rt-form-hint {
  font-size: var(--rt-text-sm);
}

.rt-link-button {
  padding-inline: 0;
}

.rt-list-group {
  border-radius: var(--rt-radius-md);
  overflow: hidden;
}

.rt-list-group-item {
  background-color: rgba(15, 23, 42, 0.9);
  border-color: rgba(30, 64, 175, 0.4);
}

/* === Bootstrap Dark Overrides === */
.form-control, .form-select {
  background-color: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.4);
  color: var(--rt-color-text);
}

.form-control:focus, .form-select:focus {
  background-color: rgba(15, 23, 42, 1);
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
  color: var(--rt-color-text);
}

.form-control::placeholder {
  color: var(--rt-color-text-muted);
}

.form-check-input {
  background-color: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.5);
}

.form-check-input:checked {
  background-color: var(--rt-color-primary);
  border-color: var(--rt-color-primary);
}

.form-check-label {
  color: var(--rt-color-text-muted);
}

.card {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(148, 163, 184, 0.2);
  color: var(--rt-color-text);
}

.card-header {
  background: rgba(15, 23, 42, 0.6);
  border-bottom-color: rgba(148, 163, 184, 0.15);
}

.card-body {
  color: var(--rt-color-text);
}

.list-group-item {
  background-color: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.15);
  color: var(--rt-color-text);
}

.btn-outline-secondary {
  color: var(--rt-color-text-muted);
  border-color: rgba(148, 163, 184, 0.4);
}

.btn-outline-secondary:hover {
  background: rgba(148, 163, 184, 0.15);
  color: var(--rt-color-text);
  border-color: rgba(148, 163, 184, 0.6);
}

.btn-outline-danger {
  border-color: rgba(239, 68, 68, 0.5);
}

.btn-outline-danger:hover {
  background: rgba(239, 68, 68, 0.15);
}

.btn-success {
  background-color: #16a34a;
  border-color: #16a34a;
}

.btn-secondary {
  background-color: rgba(30, 41, 59, 0.9);
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--rt-color-text);
}

.text-muted {
  color: var(--rt-color-text-muted) !important;
}

.badge.bg-primary {
  background-color: var(--rt-color-primary) !important;
}

.badge.bg-info {
  background-color: var(--rt-color-secondary) !important;
  color: #fff !important;
}

.alert-danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.input-group .form-control {
  border-color: rgba(148, 163, 184, 0.4);
}

hr {
  border-color: rgba(148, 163, 184, 0.15);
}

/* === Glass & Glow Utilities === */
.rt-glass {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: var(--rt-radius-lg);
}

.rt-glow-blue {
  border-left: 3px solid rgba(59, 130, 246, 0.7);
}

.rt-glow-green {
  border-left: 3px solid rgba(34, 197, 94, 0.7);
}

.rt-glow-orange {
  border-left: 3px solid rgba(249, 115, 22, 0.7);
}

.rt-glow-purple {
  border-left: 3px solid rgba(168, 85, 247, 0.7);
}

.rt-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--rt-radius-md);
  font-size: 1rem;
  flex-shrink: 0;
}

.rt-icon-badge--blue {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.rt-icon-badge--green {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.rt-icon-badge--orange {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
}

.rt-icon-badge--purple {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.rt-icon-badge--red {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* Shimmer skeleton */
.rt-skeleton {
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.5) 25%, rgba(51, 65, 85, 0.5) 50%, rgba(30, 41, 59, 0.5) 75%);
  background-size: 200% 100%;
  animation: rt-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--rt-radius-sm);
}

@keyframes rt-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Card hover lift */
.rt-card-lift {
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.rt-card-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--rt-shadow-md);
}

/* Social proof */
.rt-social-proof {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--rt-space-4);
  align-items: start;
}

.rt-card--quote {
  font-style: italic;
  font-size: var(--rt-text-lg);
  backdrop-filter: blur(12px);
  background: rgba(15, 23, 42, 0.6);
}

/* === Group card: per-member color === */
.rt-group-card--colored {
  border-color: color-mix(in srgb, var(--rt-group-color, transparent) 60%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--rt-group-color, transparent) 35%, rgba(15,23,42,0.95)) 0%, rgba(15,23,42,0.95) 100%);
}

.rt-group-card__actions {
  display: flex;
  align-items: center;
  gap: var(--rt-space-2);
  flex-shrink: 0;
}

.rt-group-card__color-picker {
  margin-bottom: var(--rt-space-3);
}

/* Colored page header strip on group detail */
.rt-page-header--colored {
  padding: var(--rt-space-4) var(--rt-space-4);
  border-radius: var(--rt-radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rt-group-color, transparent) 40%, rgba(15,23,42,0.95)) 0%, rgba(15,23,42,0.95) 100%);
  border: 1px solid color-mix(in srgb, var(--rt-group-color, transparent) 50%, transparent);
  margin-bottom: var(--rt-space-5);
}

/* Colored gradient background wash on group list / list detail pages */
.rt-lists-page--colored {
  background: linear-gradient(135deg, color-mix(in srgb, var(--rt-group-color, transparent) 25%, transparent) 0%, transparent 65%);
}

/* === Color selector === */
.rt-color-selector {
  user-select: none;
  max-width: 280px;
}

/* --- HSV Picker mode --- */
.rt-picker__saturation {
  position: relative;
  width: 270px;
  height: 150px;
  border-radius: var(--rt-radius-md);
  cursor: crosshair;
  overflow: hidden;
}

.rt-picker__white-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fff, transparent);
}

.rt-picker__black-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000, transparent);
}

.rt-picker__thumb {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0,0,0,0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.rt-picker__hue-bar {
  margin-top: var(--rt-space-2);
}

.rt-picker__hue-slider {
  width: 100%;
  height: 14px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 7px;
  background: linear-gradient(to right,
    hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%),
    hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%),
    hsl(360,100%,50%));
  outline: none;
  cursor: pointer;
}

.rt-picker__hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #888;
  box-shadow: 0 0 3px rgba(0,0,0,0.4);
  cursor: pointer;
}

.rt-picker__hue-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #888;
  box-shadow: 0 0 3px rgba(0,0,0,0.4);
  cursor: pointer;
}

/* --- Controls bar (preview + hex + mode switch) --- */
.rt-picker__controls {
  display: flex;
  align-items: center;
  gap: var(--rt-space-2);
  margin-top: var(--rt-space-3);
}

.rt-picker__preview-hex {
  display: flex;
  align-items: center;
  gap: var(--rt-space-2);
  flex: 1;
}

.rt-picker__preview {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: var(--rt-radius-md);
  border: 1px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
}

.rt-picker__hex-input {
  width: 90px;
  font-family: monospace;
  font-size: var(--rt-text-sm);
}

.rt-picker__mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
}

/* --- Palette mode --- */
.rt-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rt-palette__tile {
  width: 26px;
  height: 26px;
  border-radius: var(--rt-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.rt-palette__tile:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.5);
}

.rt-palette__tile--selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
  transform: scale(1.1);
}

/* --- Action buttons --- */
.rt-color-selector__actions {
  display: flex;
  align-items: center;
  gap: var(--rt-space-2);
  margin-top: var(--rt-space-3);
}

/* Color indicator swatch on group card */
.rt-color-indicator {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: var(--rt-radius-full);
  border: 2px solid rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

/* Color picker toggle button on group card */
.rt-color-picker-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  border-radius: var(--rt-radius-sm);
  font-size: 1rem;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 150ms ease;
}

.rt-color-picker-btn:hover {
  opacity: 1;
}

/* Color section card on group detail */
.rt-group-card__color-section {
  padding: var(--rt-space-4);
}

.rt-card-meta {
  font-style: normal;
  font-size: var(--rt-text-sm);
  color: var(--rt-color-text-muted);
  margin-top: var(--rt-space-3);
}

.rt-card--stats ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--rt-space-3);
}

.rt-card--stats strong {
  color: var(--rt-color-primary);
  font-size: var(--rt-text-xl);
  display: block;
}

/* CTA section */
.rt-section--cta {
  text-align: center;
  padding: var(--rt-space-7) var(--rt-space-4);
}

.rt-section-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rt-space-4);
}

.rt-section-inner h2 {
  margin-bottom: var(--rt-space-2);
}

.rt-section-inner p {
  color: var(--rt-color-text-muted);
}

.rt-cta-actions {
  display: flex;
  gap: var(--rt-space-3);
}

@media (max-width: 768px) {
  .rt-social-proof {
    grid-template-columns: 1fr;
  }

  .rt-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* === Page Header === */
.rt-page-header {
  display: flex;
  align-items: center;
  gap: var(--rt-space-4);
  margin-bottom: var(--rt-space-5);
  flex-wrap: wrap;
}

.rt-page-header h1 {
  margin: 0;
}

/* === Group Card === */
.rt-group-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rt-group-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rt-space-2);
  margin-bottom: var(--rt-space-3);
}

.rt-group-card__title {
  margin: 0;
  font-size: var(--rt-text-lg);
  font-weight: 600;
}

.rt-group-card__title a {
  color: #60a5fa;
  text-decoration: none;
}

.rt-group-card__title a:hover {
  text-decoration: underline;
  color: #93c5fd;
}

.rt-group-card__description {
  color: var(--rt-color-text-muted);
  font-size: var(--rt-text-sm);
  margin: 0 0 var(--rt-space-3) 0;
  flex: 1;
}

.rt-group-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-space-2);
  padding-top: var(--rt-space-3);
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  margin-top: auto;
}

/* === Skeleton loading === */
.rt-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-3);
}

.rt-skeleton--card {
  height: 120px;
  border-radius: var(--rt-radius-lg);
}

/* === Empty state === */
.rt-empty-state {
  text-align: center;
  padding: var(--rt-space-7) var(--rt-space-4);
  color: var(--rt-color-text-muted);
}

.rt-empty-state p {
  margin-bottom: var(--rt-space-4);
}

/* === Member list === */
.rt-member-list {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-2);
}

.rt-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-space-3);
  padding: var(--rt-space-2) var(--rt-space-3);
  border-radius: var(--rt-radius-md);
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.rt-member-row--self {
  border-color: rgba(59, 130, 246, 0.25);
  background: rgba(37, 99, 235, 0.06);
}

.rt-member-row__info {
  display: flex;
  align-items: center;
  gap: var(--rt-space-3);
  flex: 1;
  min-width: 0;
}

.rt-member-row__name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--rt-text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 80px;
}

.rt-role-select {
  max-width: 140px;
  flex-shrink: 0;
}

.rt-member-row__actions {
  flex-shrink: 0;
}

.rt-member-row__remove-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Colored dot showing a member's card color */
.rt-member-row__color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Collapsed color swatch preview on group detail */
.rt-color-swatch-preview {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: var(--rt-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

/* === Alert banners === */
.rt-alert {
  padding: var(--rt-space-3) var(--rt-space-4);
  border-radius: var(--rt-radius-md);
  font-size: var(--rt-text-sm);
  border: 1px solid transparent;
}

.rt-alert--info {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.25);
  color: var(--rt-color-text);
}

.rt-alert--warning {
  background: var(--rt-color-warning-soft);
  border-color: var(--rt-color-warning);
  color: var(--rt-color-text);
}

.rt-alert--warning i {
  color: var(--rt-color-warning);
}

/* === Member profile (read-only shared data view) === */
.rt-member-profile__list {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-2);
  margin: 0;
}

.rt-member-profile__item {
  display: flex;
  flex-direction: row;
  gap: var(--rt-space-3);
  padding: var(--rt-space-2) 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  flex-wrap: wrap;
  min-width: 0;
}

.rt-member-profile__item:last-child {
  border-bottom: none;
}

.rt-member-profile__label {
  font-size: var(--rt-text-sm);
  font-weight: 600;
  color: var(--rt-color-text-muted);
  min-width: 8rem;
  flex-shrink: 0;
}

.rt-member-profile__value {
  font-size: var(--rt-text-sm);
  color: var(--rt-color-text);
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Clickable member row (extends base rt-member-row) */
.rt-member-row--clickable {
  cursor: pointer;
}

.rt-member-row--clickable:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.2);
}

/* ─── Messaging module ─────────────────────────────────────────────────── */
.rt-messaging-page {
  max-width: 60rem;
}

.rt-message-list {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-2);
  max-height: 60vh;
  overflow-y: auto;
}

.rt-message-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rt-message-row--self {
  align-items: flex-end;
}

.rt-message-bubble {
  position: relative;
  max-width: var(--rt-message-bubble-max);
  padding: var(--rt-space-2) var(--rt-space-3);
  border-radius: var(--rt-radius-md);
  background: var(--rt-bubble-bg-other);
  color: var(--rt-bubble-fg-other);
  border: 1px solid var(--rt-color-border-subtle);
  box-shadow: var(--rt-shadow-sm);
}

.rt-message-row--self .rt-message-bubble {
  background: var(--rt-bubble-bg-self);
  color: var(--rt-bubble-fg-self);
}

.rt-message-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rt-space-2);
  font-size: var(--rt-text-xs);
  color: var(--rt-color-text-muted);
  margin-bottom: var(--rt-space-1);
}

.rt-message-row--self .rt-message-meta {
  color: rgba(11, 17, 32, 0.7);
}

.rt-message-author {
  font-weight: 600;
}

.rt-message-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.rt-message-edited {
  font-style: italic;
  font-size: var(--rt-text-xs);
}

.rt-message-tombstone {
  font-style: italic;
  color: var(--rt-color-text-muted);
}

.rt-message-actions {
  display: none;
  position: absolute;
  top: var(--rt-space-1);
  right: var(--rt-space-1);
  gap: var(--rt-space-1);
}

.rt-message-bubble:hover .rt-message-actions,
.rt-message-bubble:focus-within .rt-message-actions {
  display: flex;
}

.rt-message-empty {
  padding: var(--rt-space-5) 0;
}

.rt-typing-indicator {
  font-size: var(--rt-text-sm);
  color: var(--rt-color-text-muted);
  font-style: italic;
  padding: var(--rt-space-1) 0;
  min-height: 1.5rem;
}

.rt-message-composer {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-1);
}

.rt-message-composer-textarea {
  resize: vertical;
  min-height: 2.5rem;
}

.rt-message-composer-hint,
.rt-message-composer-counter {
  font-size: var(--rt-text-xs);
}

.rt-message-edit-textarea {
  resize: vertical;
}

/* Emoji picker */
.rt-emoji-picker {
  position: relative;
  display: inline-block;
}

.rt-emoji-picker-toggle {
  font-size: var(--rt-text-lg);
  line-height: 1;
}

.rt-emoji-picker-panel {
  position: absolute;
  bottom: 100%;
  right: 0;
  left: auto;
  width: 18rem;
  max-height: 20rem;
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-1);
  padding: var(--rt-space-2);
  background: var(--rt-color-surface);
  border: 1px solid var(--rt-color-border-subtle);
  border-radius: var(--rt-radius-md);
  box-shadow: var(--rt-shadow-md);
  z-index: 1000;
}

@media (max-width: 767.98px) {
  .rt-emoji-picker-panel {
    right: auto;
    left: 0;
  }
}

.rt-emoji-picker-tabs {
  display: flex;
  gap: var(--rt-space-1);
  overflow-x: auto;
}

.rt-emoji-picker-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rt-radius-sm);
  padding: var(--rt-space-1) var(--rt-space-2);
  font-size: var(--rt-text-md);
  cursor: pointer;
  color: var(--rt-color-text);
}

.rt-emoji-picker-tab:hover {
  background: var(--rt-color-surface-alt);
}

.rt-emoji-picker-tab--active {
  background: var(--rt-color-primary-soft);
  color: var(--rt-bubble-fg-self);
  border-color: var(--rt-color-primary);
}

.rt-emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--rt-space-1);
  overflow-y: auto;
  flex: 1 1 auto;
}

.rt-emoji-picker-item {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rt-radius-sm);
  padding: var(--rt-space-1);
  font-size: var(--rt-text-lg);
  cursor: pointer;
  line-height: 1;
}

.rt-emoji-picker-item:hover,
.rt-emoji-picker-item:focus {
  background: var(--rt-color-surface-alt);
  border-color: var(--rt-color-border-subtle);
  outline: none;
}

.rt-emoji-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--rt-space-3) 0;
}

/* Messages index — group selection cards */
.rt-group-messages-card {
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rt-group-messages-card:hover {
  border-color: var(--rt-color-primary);
  box-shadow: var(--rt-shadow-md);
  color: inherit;
}

.rt-group-messages-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--rt-radius-md);
  background: var(--rt-color-primary);
  color: var(--rt-color-on-primary);
  font-size: var(--rt-text-lg);
  flex-shrink: 0;
}

.rt-group-messages-card .min-width-0 {
  min-width: 0;
}

/* === Modal overlay === */
.rt-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}

.rt-modal {
  background: var(--rt-color-surface);
  border: 1px solid var(--rt-color-border-subtle);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-shadow-lg);
  padding: var(--rt-space-5);
  min-width: 20rem;
  max-width: 90vw;
}

.rt-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--rt-space-4);
}

.rt-modal__title {
  margin: 0;
  font-size: var(--rt-text-lg);
  font-weight: 600;
}

.rt-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rt-color-text-muted);
  font-size: var(--rt-text-xl);
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--rt-radius-sm);
  transition: color 150ms ease, background 150ms ease;
}

.rt-modal__close:hover {
  color: var(--rt-color-text);
  background: var(--rt-color-surface-alt);
}

/* Inventory module — expiration state utilities */
.rt-expiration-warn {
  background: var(--rt-color-warning-soft);
  border-left: 3px solid var(--rt-color-warning);
  padding: var(--rt-space-3) var(--rt-space-4);
  border-radius: var(--rt-radius-sm);
}

.rt-expiration-past {
  background: var(--rt-color-danger-soft);
  border-left: 3px solid var(--rt-color-danger);
  padding: var(--rt-space-3) var(--rt-space-4);
  border-radius: var(--rt-radius-sm);
}

.rt-expiration-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-1);
  font-size: var(--rt-text-xs);
  padding: var(--rt-space-1) var(--rt-space-2);
  border-radius: var(--rt-radius-full);
  font-weight: 500;
}

.rt-expiration-badge--warn {
  background: var(--rt-color-warning-soft);
  color: var(--rt-color-warning);
}

.rt-expiration-badge--past {
  background: var(--rt-color-danger-soft);
  color: var(--rt-color-danger);
}

/* Inventory module — location tree */
.rt-location-tree {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-1);
}

.rt-location-node {
  display: flex;
  align-items: center;
  gap: var(--rt-space-2);
  padding: var(--rt-space-2) var(--rt-space-3);
  border-radius: var(--rt-radius-sm);
  cursor: pointer;
  transition: background 120ms ease;
}

.rt-location-node:hover {
  background: var(--rt-color-surface-alt);
}

.rt-location-node--selected {
  background: var(--rt-color-primary-tint);
  border-left: 3px solid var(--rt-color-primary);
  padding-left: calc(var(--rt-space-3) - 3px);
  color: var(--rt-color-text);
}

.rt-location-node--selected .rt-location-node-name {
  font-weight: 600;
  color: var(--rt-color-text);
}

.rt-location-children {
  margin-left: var(--rt-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-1);
}

.rt-location-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-1);
}

.rt-location-action.rt-btn {
  padding: 0.1rem 0.4rem;
  border-radius: var(--rt-radius-sm);
  font-size: var(--rt-text-sm);
}

.rt-location-rename-input.form-control {
  flex: 1;
  min-width: 0;
  padding: 0.15rem 0.45rem;
  height: auto;
  font-size: var(--rt-text-sm);
}

.rt-inventory-rename-input.form-control {
  font-size: var(--rt-text-xl);
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  max-width: 28rem;
}

/* Inventory module — stock batch row */
.rt-stock-row {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-2);
  padding: var(--rt-space-4);
  border-bottom: 1px solid var(--rt-color-border-subtle);
}

.rt-stock-row:last-child {
  border-bottom: none;
}

.rt-stock-row-meta {
  color: var(--rt-color-text-muted);
  font-size: var(--rt-text-sm);
}

/* Inventory module — wizard stepper */
.rt-wizard-stepper {
  display: flex;
  align-items: center;
  gap: var(--rt-space-2);
  margin-bottom: var(--rt-space-5);
}

.rt-wizard-step {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-2);
  color: var(--rt-color-text-muted);
  font-size: var(--rt-text-sm);
}

.rt-wizard-step--active {
  color: var(--rt-color-text);
  font-weight: 600;
}

.rt-wizard-step--done {
  color: var(--rt-color-success);
}

.rt-wizard-step-dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--rt-radius-full);
  background: var(--rt-color-surface-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--rt-text-xs);
  font-weight: 600;
  color: var(--rt-color-text-muted);
}

.rt-wizard-step--active .rt-wizard-step-dot {
  background: var(--rt-color-primary);
  color: var(--rt-color-on-primary);
}

.rt-wizard-step--done .rt-wizard-step-dot {
  background: var(--rt-color-success);
  color: var(--rt-color-on-primary);
}

.rt-wizard-step-sep {
  color: var(--rt-color-text-muted);
  font-size: var(--rt-text-sm);
}

/* Inventory module — type tile (landing dashboard) */
.rt-inventory-tile {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-3);
  padding: var(--rt-space-5);
  border-radius: var(--rt-radius-md);
  background: var(--rt-color-surface);
  border: 1px solid var(--rt-color-border-subtle);
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms ease, transform 150ms ease;
}

.rt-inventory-tile:hover {
  border-color: var(--rt-color-primary);
  transform: translateY(-1px);
}

.rt-inventory-tile-header {
  display: flex;
  align-items: center;
  gap: var(--rt-space-3);
}

.rt-inventory-tile-stats {
  color: var(--rt-color-text-muted);
  font-size: var(--rt-text-sm);
}

.rt-inventory-tile-flags {
  display: flex;
  gap: var(--rt-space-3);
  font-size: var(--rt-text-sm);
}

/* Inventory module — color dot accent (used for category swatches).
   Keeps user-chosen colors as an accent rather than a background so the
   surrounding text/pill keeps its theme contrast. */
.rt-color-dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--rt-radius-full);
  vertical-align: middle;
  margin-right: var(--rt-space-1);
  flex-shrink: 0;
}

.rt-color-dot--lg {
  width: 1rem;
  height: 1rem;
}

/* Inventory module — wizard template card (selectable card-as-button). */
.rt-template-card {
  /* Neutralise <button> defaults so the card styling shows through cleanly. */
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  display: block;
  width: 100%;
  cursor: pointer;

  background: var(--rt-color-surface);
  border-radius: var(--rt-radius-lg);
  padding: var(--rt-space-4);
  box-shadow: var(--rt-shadow-sm);
  border: 1px solid var(--rt-color-border-subtle);
  transition: border-color 150ms ease, background-color 150ms ease,
              box-shadow 150ms ease, transform 150ms ease;
}

.rt-template-card:hover {
  border-color: var(--rt-color-primary);
  transform: translateY(-1px);
}

.rt-template-card:focus-visible {
  outline: 2px solid var(--rt-color-primary);
  outline-offset: 2px;
}

.rt-template-card--selected {
  border-color: var(--rt-color-primary);
  background: var(--rt-color-primary-tint);
  box-shadow: 0 0 0 1px var(--rt-color-primary), var(--rt-shadow-sm);
}

.rt-template-card--selected:hover {
  transform: none;
}

/* Inventory module — Syncfusion datepicker theming.
   Mirrors the Calendar module's scoped picker styling but uses tokens so it
   works in any host component, not just the calendar page. */
.rt-datepicker-wrapper {
  width: 100%;
}

.rt-datepicker-wrapper .e-input-group,
.rt-datepicker-wrapper .e-input-group.e-control-wrapper {
  background-color: var(--rt-color-surface);
  border-color: var(--rt-color-border-subtle);
  border-radius: var(--rt-radius-md);
  color: var(--rt-color-text);
  width: 100%;
}

.rt-datepicker-wrapper .e-input-group input,
.rt-datepicker-wrapper .e-input-group.e-control-wrapper input {
  color: var(--rt-color-text);
  background-color: transparent;
}

.rt-datepicker-wrapper .e-input-group .e-input-group-icon,
.rt-datepicker-wrapper .e-input-group.e-control-wrapper .e-input-group-icon {
  color: var(--rt-color-text-muted);
}

.rt-datepicker-wrapper .e-input-group:not(.e-focused):not(.e-disabled):hover,
.rt-datepicker-wrapper .e-input-group.e-control-wrapper:not(.e-focused):not(.e-disabled):hover {
  border-color: var(--rt-color-text-muted);
}

.rt-datepicker-wrapper .e-input-group.e-focused,
.rt-datepicker-wrapper .e-input-group.e-control-wrapper.e-focused {
  border-color: var(--rt-color-primary);
  box-shadow: 0 0 0 1px var(--rt-color-primary-focus-ring);
}

/* ─── AI assistant ─────────────────────────────────────────────────────── */
.rt-assistant-trigger.rt-btn {
  font-size: var(--rt-text-lg);
  line-height: 1;
  padding: var(--rt-space-1) var(--rt-space-2);
}

.rt-assistant-backdrop {
  position: fixed;
  inset: 0;
  background: var(--rt-color-scrim);
  z-index: 1100;
}

.rt-assistant-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1101;
  width: min(26rem, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--rt-color-surface);
  border-left: 1px solid var(--rt-color-border-subtle);
  box-shadow: var(--rt-shadow-lg);
}

.rt-assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rt-space-4);
  border-bottom: 1px solid var(--rt-color-border-subtle);
}

.rt-assistant-title {
  margin: 0;
  font-size: var(--rt-text-lg);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-2);
}

.rt-assistant-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--rt-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-2);
}

.rt-assistant-hint {
  color: var(--rt-color-text-muted);
  font-size: var(--rt-text-sm);
}

.rt-assistant-footer {
  padding: var(--rt-space-3) var(--rt-space-4);
  border-top: 1px solid var(--rt-color-border-subtle);
}

.rt-assistant-composer {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-1);
}

.rt-assistant-composer-row {
  display: flex;
  align-items: flex-end;
  gap: var(--rt-space-2);
}

.rt-assistant-voice-hint {
  font-size: var(--rt-text-xs);
  color: var(--rt-color-text-muted);
}

.rt-assistant-input.form-control {
  flex: 1;
  min-width: 0;
  resize: none;
  min-height: 2.5rem;
  max-height: 8rem;
}

.rt-assistant-mic.rt-btn,
.rt-assistant-send.rt-btn {
  flex-shrink: 0;
}

.rt-assistant-mic--active.rt-btn {
  color: var(--rt-color-on-primary);
  background: var(--rt-color-danger);
}

.rt-assistant-typing {
  color: var(--rt-color-text-muted);
  letter-spacing: 0.15em;
}

/* Clarification chips */
.rt-assistant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-2);
  margin-top: var(--rt-space-2);
}

.rt-chip {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  cursor: pointer;
  padding: var(--rt-space-1) var(--rt-space-3);
  border-radius: var(--rt-radius-full);
  border: 1px solid var(--rt-color-border-subtle);
  background: var(--rt-color-surface-alt);
  color: var(--rt-color-text);
  transition: border-color 150ms ease, background-color 150ms ease;
}

.rt-chip:hover {
  border-color: var(--rt-color-primary);
}

.rt-chip:focus-visible {
  outline: 2px solid var(--rt-color-primary);
  outline-offset: 2px;
}

.rt-chip:disabled,
.rt-chip[disabled] {
  opacity: 0.55;
  cursor: default;
}

/* Proposal confirmation card */
.rt-assistant-card {
  width: 100%;
  background: var(--rt-color-surface-alt);
  border: 1px solid var(--rt-color-border-subtle);
  border-left: 3px solid var(--rt-color-primary);
  border-radius: var(--rt-radius-md);
  padding: var(--rt-space-3) var(--rt-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-3);
}

.rt-assistant-card-summary {
  color: var(--rt-color-text);
}

.rt-assistant-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-2);
}

.rt-assistant-card-status {
  font-size: var(--rt-text-sm);
  color: var(--rt-color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-1);
}

.rt-assistant-card-status--ok {
  color: var(--rt-color-success);
}

.rt-assistant-card-status--err {
  color: var(--rt-color-danger);
}
