/* Canvas TapNow theme - page chrome, topbar buttons, and project cards. */

/* Page chrome and project cards */
.canvas-page .canvas-topbar {
  border-bottom-color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.canvas-page .canvas-brand {
  color: var(--canvas-text);
}

.canvas-page .canvas-brand small,
.canvas-page .canvas-save-state,
.canvas-page .canvas-projects-subtitle,
.canvas-page .canvas-project-meta {
  color: var(--canvas-text-muted);
}

.canvas-page .canvas-brand-icon {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.16), 0 8px 24px rgba(0, 0, 0, 0.24);
}

.canvas-page .canvas-top-btn,
.canvas-page .canvas-ghost-btn {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: #262626;
  color: var(--canvas-text-soft);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  transition: color var(--canvas-motion-fast), background var(--canvas-motion-fast), border-color var(--canvas-motion-fast), box-shadow var(--canvas-motion-fast);
}

.canvas-page .canvas-top-btn:hover,
.canvas-page .canvas-ghost-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: var(--canvas-surface-raised);
  color: var(--canvas-text);
}

.canvas-page .canvas-primary-btn {
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), inset 0 0.5px 0 rgba(255, 255, 255, 0.18);
}

.canvas-page .canvas-projects-title,
.canvas-page .canvas-project-name {
  color: var(--canvas-text);
}

.canvas-page .canvas-project-card {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: #1d1d1d;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.06);
  transition: color var(--canvas-motion-fast), background var(--canvas-motion-fast), border-color var(--canvas-motion-fast), box-shadow var(--canvas-motion-fast), transform var(--canvas-motion-fast);
}

.canvas-page .canvas-project-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: #222222;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
}

.canvas-page .canvas-project-start {
  background: #1d1d1d;
}

.canvas-page .canvas-project-plus {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #f5f5f5;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
}

.canvas-page .canvas-project-node-preview,
.canvas-page .canvas-project-thumb,
.canvas-page .canvas-project-empty {
  border-color: rgba(255, 255, 255, 0.1);
  background: #0f0f0f;
}

.canvas-page .canvas-project-mini-map {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: #0a0a0a;
}

.canvas-page .canvas-project-mini-map-head {
  color: var(--canvas-text-soft);
}

.canvas-page .canvas-project-mini-map-head span,
.canvas-page .canvas-project-empty {
  color: var(--canvas-text-muted);
}

.canvas-page .canvas-project-mini-map-body {
  border-color: rgba(255, 255, 255, 0.08);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-color: #0a0a0a;
}

.canvas-page .canvas-project-mini-node {
  border-color: rgba(255, 255, 255, 0.38);
  background: #737373;
}