:root {
  /*
   * ElixirTodo implementation palette.
   * Direction follows ElixirBrain: black foundation + bright rainbow spectrum.
   * Exact corporate colour values are not yet defined in the brand identity,
   * so these tokens are intentionally isolated here for easy replacement.
   */
  --bg: #050506;
  --panel: #0d0d10;
  --panel-2: #141419;
  --panel-3: #1b1b22;
  --line: #2a2a33;
  --line-soft: #202027;
  --text: #f8f8fb;
  --muted: #a1a1ad;
  --muted-2: #737380;

  /* Cyan/turquoise is the functional accent; the rainbow is the expressive accent. */
  --accent: #22d3ee;
  --accent-2: #67e8f9;
  --accent-soft: rgba(34, 211, 238, .14);

  --brand-red: #ff4d6d;
  --brand-orange: #ff9f1c;
  --brand-yellow: #ffe66d;
  --brand-green: #34d399;
  --brand-cyan: #22d3ee;
  --brand-blue: #60a5fa;
  --brand-purple: #a855f7;
  --brand-pink: #f472b6;
  --brand-spectrum: linear-gradient(
    90deg,
    var(--brand-red) 0%,
    var(--brand-orange) 14%,
    var(--brand-yellow) 28%,
    var(--brand-green) 42%,
    var(--brand-cyan) 56%,
    var(--brand-blue) 70%,
    var(--brand-purple) 84%,
    var(--brand-pink) 100%
  );
  --brand-spectrum-soft: linear-gradient(
    120deg,
    rgba(255, 77, 109, .12),
    rgba(255, 159, 28, .10),
    rgba(34, 211, 238, .12),
    rgba(168, 85, 247, .12),
    rgba(244, 114, 182, .10)
  );
}

html,
body {
  background: var(--bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand-spectrum);
  z-index: 120;
  pointer-events: none;
}

.sidebar {
  background: rgba(5, 5, 6, .94);
}

.brand-mark {
  color: #050506;
  background: var(--brand-spectrum);
  box-shadow: 0 14px 42px rgba(34, 211, 238, .14), 0 8px 30px rgba(244, 114, 182, .10);
}

.button.primary {
  color: #050506;
  background: var(--brand-spectrum);
  box-shadow: 0 10px 28px rgba(34, 211, 238, .12), 0 7px 24px rgba(244, 114, 182, .10);
}

.button.primary:hover,
.brand-mark:hover {
  filter: saturate(1.08) brightness(1.04);
}

.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-2);
  box-shadow: inset 3px 0 var(--accent);
}

.nav-item.active .nav-icon {
  color: var(--accent-2);
}

.eyebrow,
.panel-action,
.activity-icon,
.ticket-kicker {
  color: var(--accent-2);
}

.stat-card,
.panel,
.project-tile,
.person-card,
.saved-view-card,
.ticket-card,
.login-card,
.modal-card,
.command-card {
  border-color: var(--line);
}

.focus-card {
  position: relative;
  background: var(--brand-spectrum-soft), rgba(13, 13, 16, .92);
}

.focus-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--brand-spectrum);
}

.focus-card .focus-label,
.pill.project,
.person-avatar,
.session-avatar {
  color: var(--accent-2);
}

.person-avatar,
.session-avatar,
.pill.project {
  background: var(--accent-soft);
}

.progress > i {
  background: var(--brand-spectrum);
}

.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus,
.login-card input:focus,
.ticket-item-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .10);
  outline: none;
}

.icon-button:hover,
.mini-button:hover,
.command-hint:hover {
  border-color: rgba(103, 232, 249, .48);
}

.complete-button:hover {
  border-color: var(--brand-green);
  background: rgba(52, 211, 153, .08);
}

.toast {
  border-color: rgba(103, 232, 249, .28);
}

.master-mail-link {
  text-align: center;
  text-decoration: none;
}

@media (max-width: 760px) {
  .sidebar {
    background: rgba(5, 5, 6, .97);
  }

  /* The normal quick-add row is hidden by the mobile work-centre layout.
     Keep Mail as a first-class floating destination above the bottom nav. */
  .master-mail-link {
    display: grid !important;
    place-items: center;
    position: fixed;
    right: 16px;
    bottom: 78px;
    width: 58px !important;
    height: 58px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 18px;
    z-index: 26;
    font-size: 0;
    box-shadow: 0 10px 32px rgba(34, 211, 238, .22), 0 8px 26px rgba(244, 114, 182, .16);
  }

  .master-mail-link::after {
    content: "✉";
    font-size: 24px;
    color: #050506;
  }
}