/* =========================================
   MigrationCoordinator Dashboard — Warm Paper
   ========================================= */

:root {
  --mc-bg:          #f6f4f0;
  --mc-surface:     #ffffff;
  --mc-surface-2:   #f0ede8;
  --mc-border:      #e0dbd3;
  --mc-border-lt:   #d4cfc6;
  --mc-text:        #3d3a36;
  --mc-text-dim:    #908a7f;
  --mc-text-bright: #1a1816;
  --mc-accent:      #b87514;
  --mc-accent-dim:  rgba(184, 117, 20, 0.09);
  --mc-teal:        #1a8a72;
  --mc-teal-dim:    rgba(26, 138, 114, 0.07);
  --mc-coral:       #c0392b;
  --mc-coral-dim:   rgba(192, 57, 43, 0.06);
  --mc-amber:       #a07d1c;
  --mc-amber-dim:   rgba(160, 125, 28, 0.07);
  --mc-blue:        #2563eb;
  --mc-blue-dim:    rgba(37, 99, 235, 0.07);
  --mc-purple:      #7c3aed;
  --mc-purple-dim:  rgba(124, 58, 237, 0.07);
  --mc-font-body:   'DM Sans', system-ui, sans-serif;
  --mc-font-mono:   'JetBrains Mono', 'Cascadia Code', monospace;
  --mc-radius:      6px;
  --mc-radius-lg:   10px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--mc-bg);
  color: var(--mc-text);
  font-family: var(--mc-font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Alpine cloak */
[x-cloak] { display: none !important; }

/* ---- Navbar ---- */

.mc-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--mc-border);
}

.mc-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
}

.mc-navbar-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.mc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--mc-text-bright);
}

.mc-brand-icon {
  font-family: var(--mc-font-mono);
  font-weight: 700;
  font-size: 16px;
  color: var(--mc-accent);
  background: var(--mc-accent-dim);
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}

.mc-brand-text {
  font-family: var(--mc-font-mono);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.03em;
}

.mc-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mc-nav-link {
  padding: 6px 12px;
  border-radius: var(--mc-radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--mc-text-dim);
  text-decoration: none;
  transition: all 0.15s ease;
}

.mc-nav-link:hover {
  color: var(--mc-text-bright);
  background: var(--mc-surface-2);
}

.mc-nav-link--active {
  color: var(--mc-accent);
  background: var(--mc-accent-dim);
}

.mc-navbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mc-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mc-font-mono);
  font-size: 12px;
  color: var(--mc-text-dim);
}

.mc-status-dot-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.mc-status-dot-indicator--live {
  background: var(--mc-teal);
  animation: pulse-teal 2s ease-in-out infinite;
}

.mc-status-dot-indicator--off {
  background: var(--mc-coral);
  animation: pulse-coral 2s ease-in-out infinite;
}

/* ---- Buttons ---- */

.mc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: var(--mc-radius);
  font-family: var(--mc-font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
}

.mc-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mc-btn i { font-size: 14px; }

.mc-btn-accent {
  background: var(--mc-accent);
  color: #fff;
  border-color: var(--mc-accent);
}
.mc-btn-accent:hover:not(:disabled) {
  background: #a06810;
  border-color: #a06810;
}

.mc-btn-ghost {
  background: transparent;
  color: var(--mc-text);
  border-color: var(--mc-border);
}
.mc-btn-ghost:hover:not(:disabled) {
  background: var(--mc-surface-2);
  color: var(--mc-text-bright);
  border-color: var(--mc-border-lt);
}

.mc-btn-coral {
  background: transparent;
  color: var(--mc-coral);
  border-color: rgba(192, 57, 43, 0.3);
}
.mc-btn-coral:hover:not(:disabled) {
  background: var(--mc-coral-dim);
  border-color: var(--mc-coral);
}

.mc-btn-danger {
  background: var(--mc-coral);
  color: #fff;
  border-color: var(--mc-coral);
}
.mc-btn-danger:hover:not(:disabled) {
  background: #a93226;
  border-color: #a93226;
}

.mc-btn-teal {
  background: transparent;
  color: var(--mc-teal);
  border-color: rgba(26, 138, 114, 0.3);
}
.mc-btn-teal:hover:not(:disabled) {
  background: var(--mc-teal-dim);
}

.mc-btn-amber {
  background: transparent;
  color: var(--mc-amber);
  border-color: rgba(160, 125, 28, 0.3);
}
.mc-btn-amber:hover:not(:disabled) {
  background: var(--mc-amber-dim);
  border-color: var(--mc-amber);
}

.mc-btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}
.mc-btn-sm i { font-size: 12px; }

/* Text link-style buttons */
.mc-link {
  background: none;
  border: none;
  font-family: var(--mc-font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.1s;
}

.mc-link--accent {
  color: var(--mc-accent);
}
.mc-link--accent:hover { color: #a06810; }

.mc-link--coral {
  color: var(--mc-coral);
}
.mc-link--coral:hover { color: #a43125; }

.mc-link--teal {
  color: var(--mc-teal);
}
.mc-link--teal:hover { color: #157a64; }

/* ---- Main Layout ---- */

.mc-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* ---- Login ---- */

.mc-login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.mc-login-card {
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-lg);
  max-width: 380px;
  width: 100%;
  padding: 32px;
}

.mc-login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}

.mc-login-title {
  font-family: var(--mc-font-mono);
  font-weight: 600;
  font-size: 16px;
  color: var(--mc-text-bright);
  text-align: center;
  margin: 0 0 4px;
}

.mc-login-subtitle {
  font-size: 13px;
  color: var(--mc-text-dim);
  text-align: center;
  margin: 0 0 20px;
}

.mc-login-error {
  font-size: 13px;
  color: var(--mc-coral);
  margin-bottom: 12px;
}

/* ---- Stat Cards ---- */

.mc-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.mc-stat-card {
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-lg);
  padding: 20px;
}

.mc-stat-label {
  font-family: var(--mc-font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--mc-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.mc-stat-value {
  font-family: var(--mc-font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--mc-text-bright);
  line-height: 1;
}

.mc-stat-value--amber { color: var(--mc-amber); }
.mc-stat-value--teal  { color: var(--mc-teal); }
.mc-stat-value--coral { color: var(--mc-coral); }

/* ---- Panel ---- */

.mc-panel {
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}

.mc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--mc-border);
  background: var(--mc-surface-2);
}

.mc-panel-title {
  font-family: var(--mc-font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--mc-text-bright);
  margin: 0;
}

.mc-panel-body {
  padding: 0;
}

.mc-panel-body--padded {
  padding: 20px;
}

/* ---- Projects List ---- */

.mc-projects {
  display: flex;
  flex-direction: column;
}

.mc-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--mc-border);
  transition: background 0.15s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  animation: mc-fadeSlideIn 0.25s ease both;
}

.mc-row:last-child { border-bottom: none; }

.mc-row:hover {
  background: #faf9f7;
}

.mc-row-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mc-row--active .mc-row-indicator  { background: var(--mc-amber); }
.mc-row--idle .mc-row-indicator    { background: var(--mc-teal); }
.mc-row--empty .mc-row-indicator   { background: var(--mc-border-lt); }

.mc-row:hover .mc-row-indicator {
  opacity: 0.85;
}
.mc-row--active:hover .mc-row-indicator { box-shadow: 0 0 0 3px var(--mc-amber-dim); }
.mc-row--idle:hover .mc-row-indicator   { box-shadow: 0 0 0 3px var(--mc-teal-dim); }

.mc-row-identity {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1 1 280px;
  min-width: 0;
}

.mc-row-name {
  font-family: var(--mc-font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--mc-text-bright);
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.mc-row-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.mc-row-stat {
  font-family: var(--mc-font-mono);
  font-size: 12px;
  color: var(--mc-text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}

.mc-row-stat i {
  font-size: 14px;
}

.mc-row-stat--clickable {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 6px;
  margin: -2px -6px;
  transition: background 0.15s, color 0.15s;
}

.mc-row-stat--clickable:hover {
  background: var(--mc-accent-dim);
  color: var(--mc-accent);
}

.mc-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mc-row-arrow {
  color: var(--mc-border-lt);
  font-size: 14px;
  transition: color 0.15s;
}

.mc-row:hover .mc-row-arrow {
  color: var(--mc-text-dim);
}

/* Row stagger */
.mc-row:nth-child(1)  { animation-delay: 0s; }
.mc-row:nth-child(2)  { animation-delay: 0.02s; }
.mc-row:nth-child(3)  { animation-delay: 0.04s; }
.mc-row:nth-child(4)  { animation-delay: 0.06s; }
.mc-row:nth-child(5)  { animation-delay: 0.08s; }
.mc-row:nth-child(6)  { animation-delay: 0.10s; }
.mc-row:nth-child(7)  { animation-delay: 0.12s; }
.mc-row:nth-child(8)  { animation-delay: 0.14s; }
.mc-row:nth-child(9)  { animation-delay: 0.16s; }
.mc-row:nth-child(10) { animation-delay: 0.18s; }

/* ---- Tables ---- */

.mc-table {
  width: 100%;
  border-collapse: collapse;
}

.mc-thead {
  background: var(--mc-surface-2);
}

.mc-th {
  padding: 10px 16px;
  text-align: left;
  font-family: var(--mc-font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--mc-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--mc-border);
}

.mc-td {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--mc-text);
  border-bottom: 1px solid var(--mc-border);
}

.mc-table tbody tr:last-child .mc-td {
  border-bottom: none;
}

.mc-table tbody tr {
  transition: background 0.1s;
}

.mc-table tbody tr:hover {
  background: #faf9f7;
}

.mc-td--mono {
  font-family: var(--mc-font-mono);
  font-size: 13px;
  color: var(--mc-text-bright);
}

.mc-td--dim {
  font-size: 12px;
  color: var(--mc-text-dim);
}

.mc-td--right {
  text-align: right;
}

.mc-td--truncate {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Badges ---- */

.mc-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--mc-font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.mc-badge--reserved {
  background: var(--mc-amber-dim);
  color: var(--mc-amber);
  border: 1px solid rgba(160, 125, 28, 0.2);
}

.mc-badge--committed {
  background: var(--mc-teal-dim);
  color: var(--mc-teal);
  border: 1px solid rgba(26, 138, 114, 0.2);
}

.mc-badge--abandoned {
  background: var(--mc-surface-2);
  color: var(--mc-text-dim);
  border: 1px solid var(--mc-border);
}

.mc-badge--open {
  background: var(--mc-blue-dim);
  color: var(--mc-blue);
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.mc-badge--merged {
  background: var(--mc-teal-dim);
  color: var(--mc-teal);
  border: 1px solid rgba(26, 138, 114, 0.2);
}

/* Action badges for activity log */
.mc-badge--reserve {
  background: var(--mc-blue-dim);
  color: var(--mc-blue);
}

.mc-badge--release {
  background: var(--mc-teal-dim);
  color: var(--mc-teal);
}

.mc-badge--abandon {
  background: var(--mc-coral-dim);
  color: var(--mc-coral);
}

.mc-badge--register {
  background: var(--mc-purple-dim);
  color: var(--mc-purple);
}

.mc-badge--config {
  background: var(--mc-amber-dim);
  color: var(--mc-amber);
}

.mc-badge--default {
  background: var(--mc-surface-2);
  color: var(--mc-text-dim);
}

/* ---- Tabs ---- */

.mc-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--mc-border);
  margin-bottom: 20px;
}

.mc-tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mc-text-dim);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  font-family: var(--mc-font-body);
}

.mc-tab:hover {
  color: var(--mc-text-bright);
}

.mc-tab--active {
  color: var(--mc-accent);
  border-bottom-color: var(--mc-accent);
}

.mc-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--mc-font-body);
  line-height: 1;
  border-radius: 50%;
  background: transparent;
  color: var(--mc-text-dim);
  border: 1.5px solid var(--mc-border-lt);
  transition: all 0.2s ease;
  position: relative;
  top: -1px;
}

.mc-tab:hover .mc-tab-count {
  border-color: var(--mc-text-dim);
  color: var(--mc-text);
}

.mc-tab--active .mc-tab-count {
  border-color: var(--mc-accent);
  color: var(--mc-accent);
  background: transparent;
}

/* ---- Forms ---- */

.mc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mc-label {
  font-family: var(--mc-font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--mc-text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mc-input {
  background: var(--mc-bg);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  padding: 9px 12px;
  font-family: var(--mc-font-mono);
  font-size: 13px;
  color: var(--mc-text-bright);
  transition: border-color 0.15s;
  width: 100%;
}

.mc-input::placeholder {
  color: var(--mc-text-dim);
  opacity: 0.5;
}

.mc-input:focus {
  outline: none;
  border-color: var(--mc-accent);
  box-shadow: 0 0 0 2px var(--mc-accent-dim);
}

.mc-select {
  background: var(--mc-bg);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  padding: 6px 10px;
  font-family: var(--mc-font-mono);
  font-size: 13px;
  color: var(--mc-text-bright);
  cursor: pointer;
  transition: border-color 0.15s;
}

.mc-select:focus {
  outline: none;
  border-color: var(--mc-accent);
  box-shadow: 0 0 0 2px var(--mc-accent-dim);
}

/* ---- Banners ---- */

.mc-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--mc-radius-lg);
  margin-bottom: 20px;
  animation: mc-fadeSlideIn 0.25s ease both;
}

.mc-banner-left {
  flex: 1;
  min-width: 0;
}

.mc-banner-desc {
  font-size: 12px;
  color: var(--mc-text-dim);
  margin-top: 6px;
  line-height: 1.5;
}

.mc-banner-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mc-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mc-banner--warning {
  background: var(--mc-amber-dim);
  border: 1px solid rgba(160, 125, 28, 0.2);
}

.mc-banner--warning .mc-banner-icon {
  color: var(--mc-amber);
}

.mc-banner--warning .mc-banner-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--mc-amber);
}

.mc-banner--success {
  background: var(--mc-teal-dim);
  border: 1px solid rgba(26, 138, 114, 0.2);
}

.mc-banner--success .mc-banner-icon {
  color: var(--mc-teal);
}

.mc-banner--success .mc-banner-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--mc-teal);
}

/* ---- Dialog / Overlay ---- */

.mc-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  animation: mc-fadeIn 0.15s ease;
}

.mc-dialog {
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-lg);
  max-width: 440px;
  width: calc(100% - 32px);
  animation: mc-fadeSlideIn 0.2s ease;
}

.mc-dialog-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--mc-border);
  background: var(--mc-surface-2);
  border-radius: var(--mc-radius-lg) var(--mc-radius-lg) 0 0;
}

.mc-dialog-title {
  font-family: var(--mc-font-mono);
  font-weight: 600;
  font-size: 15px;
  color: var(--mc-text-bright);
  margin: 0;
}

.mc-dialog-body {
  padding: 20px;
  font-size: 13px;
  color: var(--mc-text);
  line-height: 1.6;
}

.mc-dialog-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--mc-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---- Dialog variants ---- */

.mc-dialog--wide {
  max-width: 720px;
}

.mc-dialog-header-left {
  display: flex;
  align-items: center;
}

.mc-dialog-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mc-text-dim);
  font-size: 16px;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}

.mc-dialog-close:hover {
  color: var(--mc-text-bright);
  background: var(--mc-surface-2);
}

.mc-dialog-body--scroll {
  max-height: 70vh;
  overflow-y: auto;
}

/* ---- File List ---- */

.mc-file-list {
  display: flex;
  flex-direction: column;
}

.mc-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: none;
  border-bottom: 1px solid var(--mc-border);
  background: none;
  cursor: pointer;
  font-family: var(--mc-font-body);
  text-align: left;
  transition: background 0.1s;
  color: var(--mc-text);
  width: 100%;
}

.mc-file-row:last-child {
  border-bottom: none;
}

.mc-file-row:hover {
  background: #faf9f7;
}

.mc-file-icon {
  font-size: 16px;
  color: var(--mc-accent);
  flex-shrink: 0;
}

.mc-file-name {
  font-family: var(--mc-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--mc-text-bright);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-file-size {
  font-family: var(--mc-font-mono);
  font-size: 11px;
  color: var(--mc-text-dim);
  flex-shrink: 0;
}

.mc-file-arrow {
  font-size: 12px;
  color: var(--mc-border-lt);
  flex-shrink: 0;
  transition: color 0.15s;
}

.mc-file-row:hover .mc-file-arrow {
  color: var(--mc-text-dim);
}

/* ---- File Content ---- */

.mc-file-content {
  margin: 0;
  padding: 16px 20px;
  background: var(--mc-bg);
  border-radius: var(--mc-radius);
  font-family: var(--mc-font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--mc-text-bright);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  tab-size: 4;
}

.mc-file-content code {
  font-family: inherit;
  font-size: inherit;
}

/* ---- Toast ---- */

.mc-toast-container {
  position: fixed;
  top: 68px;
  right: 16px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mc-toast {
  padding: 10px 16px;
  border-radius: var(--mc-radius);
  font-family: var(--mc-font-mono);
  font-size: 13px;
  font-weight: 500;
  max-width: 360px;
  animation: mc-slideInRight 0.3s ease;
  border: 1px solid;
  background: var(--mc-surface);
}

.mc-toast--success {
  color: var(--mc-teal);
  border-color: rgba(26, 138, 114, 0.3);
}

.mc-toast--error {
  color: var(--mc-coral);
  border-color: rgba(192, 57, 43, 0.3);
}

.mc-toast--info {
  color: var(--mc-text-bright);
  border-color: var(--mc-border);
}

/* ---- Breadcrumb ---- */

.mc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

.mc-breadcrumb a {
  color: var(--mc-text-dim);
  text-decoration: none;
  transition: color 0.1s;
}

.mc-breadcrumb a:hover {
  color: var(--mc-text-bright);
}

.mc-breadcrumb-sep {
  color: var(--mc-border-lt);
  font-size: 12px;
}

.mc-breadcrumb-current {
  color: var(--mc-text-bright);
  font-weight: 600;
}

/* ---- Project Header ---- */

.mc-project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-lg);
  padding: 20px;
  margin-bottom: 24px;
}

.mc-project-name {
  font-family: var(--mc-font-mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--mc-text-bright);
  margin: 0;
}

.mc-project-summary {
  font-size: 12px;
  color: var(--mc-text-dim);
  margin: 4px 0 0;
}

/* ---- Empty State ---- */

.mc-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--mc-text-dim);
  font-size: 13px;
}

/* ---- Activity Row ---- */

.mc-activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid var(--mc-border);
  transition: background 0.1s;
}

.mc-activity-row:last-child {
  border-bottom: none;
}

.mc-activity-row:hover {
  background: #faf9f7;
}

.mc-activity-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mc-activity-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mc-activity-detail {
  font-size: 12px;
  color: var(--mc-text-dim);
  word-break: break-word;
  max-width: 600px;
}

.mc-activity-time {
  font-size: 12px;
  color: var(--mc-text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 16px;
}

.mc-activity-link {
  font-size: 12px;
  color: var(--mc-accent);
  text-decoration: none;
}
.mc-activity-link:hover {
  color: #a06810;
}

/* ---- Info / Tools ---- */

.mc-tool-card {
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-lg);
  overflow: hidden;
  margin-bottom: 12px;
}

.mc-tool-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--mc-border);
  background: var(--mc-surface-2);
}

.mc-tool-name {
  font-family: var(--mc-font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--mc-text-bright);
  margin: 0;
}

.mc-tool-desc {
  font-size: 13px;
  color: var(--mc-text);
  margin: 4px 0 0;
}

.mc-tool-params {
  padding: 14px 20px;
}

.mc-tool-param {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}

.mc-tool-param-name {
  font-family: var(--mc-font-mono);
  font-size: 12px;
  color: var(--mc-accent);
  background: var(--mc-accent-dim);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.mc-tool-param-type {
  font-size: 12px;
  color: var(--mc-text-dim);
  white-space: nowrap;
}

.mc-tool-param-required {
  color: var(--mc-coral);
  font-size: 11px;
}

.mc-tool-param-desc {
  font-size: 12px;
  color: var(--mc-text-dim);
}

/* ---- Pagination ---- */

.mc-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--mc-border);
}

.mc-pagination-info {
  font-family: var(--mc-font-mono);
  font-size: 12px;
  color: var(--mc-text-dim);
}

.mc-pagination-buttons {
  display: flex;
  gap: 8px;
}

/* ---- Misc ---- */

.mc-mono { font-family: var(--mc-font-mono); }
.mc-text-dim { color: var(--mc-text-dim); }
.mc-text-bright { color: var(--mc-text-bright); }
.mc-text-accent { color: var(--mc-accent); }
.mc-text-coral { color: var(--mc-coral); }
.mc-text-teal { color: var(--mc-teal); }
.mc-text-amber { color: var(--mc-amber); }

.mc-inline-code {
  font-family: var(--mc-font-mono);
  font-size: 12px;
  background: var(--mc-surface-2);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--mc-text-bright);
}

.mc-page-title {
  font-family: var(--mc-font-mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--mc-text-bright);
  margin: 0 0 4px;
}

.mc-page-subtitle {
  font-size: 13px;
  color: var(--mc-text-dim);
  margin: 0 0 24px;
}

.mc-form-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mc-max-w-2xl {
  max-width: 680px;
}

/* Spacing helpers */
.mc-mb-4 { margin-bottom: 16px; }
.mc-mb-5 { margin-bottom: 20px; }
.mc-mt-2 { margin-top: 8px; }
.mc-gap-8 { gap: 8px; }
.mc-gap-4 { gap: 4px; }

/* Flex helpers */
.mc-flex { display: flex; }
.mc-flex-col { flex-direction: column; }
.mc-items-center { align-items: center; }
.mc-justify-between { justify-content: space-between; }
.mc-space-x-2 > * + * { margin-left: 8px; }

/* ---- Skeleton Loading ---- */

.mc-skeleton {
  background: linear-gradient(90deg, var(--mc-surface-2) 25%, var(--mc-bg) 50%, var(--mc-surface-2) 75%);
  background-size: 200% 100%;
  animation: mc-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--mc-radius-lg);
}

/* Loading spinner text */
.mc-loading {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--mc-text-dim);
}

/* ---- Scrollbar ---- */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mc-border-lt); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mc-text-dim); }

/* ---- Animations ---- */

@keyframes mc-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mc-fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mc-slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes mc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes pulse-teal {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26, 138, 114, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(26, 138, 114, 0); }
}

@keyframes pulse-coral {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
  .mc-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mc-row {
    flex-wrap: wrap;
  }
  .mc-row-identity {
    flex: 1 1 100%;
  }
  .mc-row-stats {
    flex: 1 1 100%;
  }
}

@media (max-width: 600px) {
  .mc-stat-grid {
    grid-template-columns: 1fr;
  }
  .mc-navbar-inner {
    padding: 0 12px;
  }
  .mc-main {
    padding: 16px 12px 48px;
  }
}