.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.brand-dot {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 0 28px rgba(125, 211, 252, 0.34);
}

.pill,
.mode-card,
.primary-action,
.secondary-action {
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  color: var(--muted);
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.mode-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.mode-card:hover,
.mode-card[aria-pressed="true"] {
  transform: translateY(-2px);
  border-color: rgba(125, 211, 252, 0.62);
  background: rgba(125, 211, 252, 0.1);
}

.mode-card strong { font-size: 1.05rem; }
.mode-card span { color: var(--muted); line-height: 1.55; }

.hero-panel,
.timeline-placeholder,
.tool-list,
.action-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}

.hero-panel { padding: clamp(22px, 4vw, 42px); }
.action-panel { display: grid; gap: 16px; margin-top: 22px; padding: 18px; }
.action-row { display: flex; flex-wrap: wrap; gap: 10px; }
.action-message { margin: 0; color: var(--muted); line-height: 1.6; }

.timeline-placeholder {
  min-height: 280px;
  margin-top: 16px;
  padding: 18px;
  background-image: repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.08) 0 1px, transparent 1px 64px);
}

.timeline-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.timeline-summary span,
.timeline-visual-empty,
.timeline-lane-empty {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  font-weight: 700;
}

.timeline-visual { display: grid; gap: 10px; margin-top: 16px; overflow-x: auto; padding-bottom: 4px; }
.timeline-row { display: grid; grid-template-columns: 150px minmax(360px, 1fr); min-height: 72px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: rgba(255, 255, 255, 0.035); }
.timeline-track-label { display: grid; align-content: center; gap: 4px; padding: 12px; border-left: 4px solid var(--track-color); border-right: 1px solid var(--line); background: rgba(7, 11, 22, 0.4); }
.timeline-track-label span { color: var(--muted); font-size: 0.82rem; }
.timeline-track-lane { position: relative; min-height: 72px; background-image: repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.07) 0 1px, transparent 1px 48px); }
.timeline-clip { position: absolute; top: 14px; bottom: 14px; min-width: 56px; display: flex; align-items: center; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--clip-color), rgba(255, 255, 255, 0.12)); color: #07101d; font-weight: 900; overflow: hidden; }
.timeline-clip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-lane-empty { position: absolute; top: 14px; left: 14px; color: var(--muted); font-size: 0.86rem; font-weight: 700; }
.timeline-visual-empty { margin-top: 16px; color: var(--muted); }

.import-details-card { display: grid; gap: 12px; margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.055); }
.import-details-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.import-details-grid span { display: grid; gap: 4px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.import-details-grid strong { color: var(--text); }
.peak-preview { display: flex; align-items: center; gap: 2px; min-height: 64px; overflow: hidden; }
.peak-preview-svg { width: 100%; max-width: 520px; height: 72px; fill: var(--accent); stroke: rgba(255, 255, 255, 0.18); }
.peak-preview-svg rect { opacity: 0.95; }
.peak-preview-svg line { stroke-width: 1; }
.peak-preview i { display: block; width: 4px; min-height: 8px; border-radius: 999px; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); }

.tool-list { display: grid; gap: 10px; padding: 14px; }
.status-heading { margin-top: 24px; }
.status-list { font-size: 0.88rem; }
.tool-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.045); color: var(--muted); }
.project-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-item span:last-child { color: var(--text); font-weight: 700; }
.primary-action,
.secondary-action { padding: 0 16px; cursor: pointer; transition: transform 160ms ease, opacity 160ms ease, border-color 160ms ease; }
.primary-action:hover,
.secondary-action:hover { transform: translateY(-1px); border-color: rgba(125, 211, 252, 0.62); }
.primary-action:disabled,
.secondary-action:disabled { cursor: wait; opacity: 0.64; }
.primary-action { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #04111f; font-weight: 900; }
.footer-links { display: flex; gap: 12px; flex-wrap: wrap; }