/* ===== APP-SPECIFIC STYLES ===== *//* Step Progress */.steps-progress {  display: flex;  justify-content: center;  gap: 1rem;  margin: var(--space-xl) 0;  flex-wrap: wrap;}.step-indicator {  display: flex;  align-items: center;  gap: 0.5rem;  padding: 0.5rem 1rem;  border-radius: var(--radius-full);  background: rgba(255,255,255,0.03);  border: 1px solid rgba(255,255,255,0.1);  font-size: var(--text-sm);  font-weight: 700;  color: var(--text-muted);  transition: all var(--transition);}.step-indicator.active {  background: rgba(124,92,255,0.15);  border-color: rgba(124,92,255,0.4);  color: var(--brand-glow);}.step-indicator.complete {  background: rgba(0,255,136,0.1);  border-color: rgba(0,255,136,0.3);  color: var(--good);}.step-num {  display: inline-flex;  align-items: center;  justify-content: center;  width: 24px;  height: 24px;  border-radius: 50%;  background: rgba(255,255,255,0.1);  font-size: var(--text-xs);  font-weight: 900;}.step-indicator.active .step-num {  background: var(--brand);}.step-indicator.complete .step-num::before {  content: "";  width: 10px;  height: 6px;  border-left: 2px solid currentColor;  border-bottom: 2px solid currentColor;  transform: rotate(-45deg);  display: block;}/* Presets Grid */.presets-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  gap: 0.75rem;  margin-top: var(--space-md);}.preset-tile {  padding: 1rem;  border-radius: var(--radius-md);  background: rgba(15,20,37,0.6);  border: 1px solid rgba(255,255,255,0.08);  cursor: pointer;  transition: all var(--transition);  text-align: center;}.preset-tile:hover {  border-color: rgba(124,92,255,0.4);  background: rgba(15,20,37,0.8);  transform: translateY(-2px);}.preset-tile.selected {  border-color: rgba(124,92,255,0.6);  background: rgba(124,92,255,0.1);  box-shadow: 0 0 20px rgba(124,92,255,0.3);}.preset-icon {  display: inline-flex;  align-items: center;  justify-content: center;  width: var(--icon-lg);  height: var(--icon-lg);  color: var(--text);  margin-bottom: 0.5rem;}.preset-title {  font-size: var(--text-sm);  font-weight: 800;  color: var(--text);  margin-bottom: 0.25rem;}.preset-tag {  font-size: var(--text-xs);  color: var(--text-muted);}/* Events Feed */.events-feed {  margin-top: var(--space-lg);  max-height: 400px;  overflow-y: auto;  border: 1px solid rgba(124,92,255,0.2);  border-radius: var(--radius-lg);  background: rgba(0,0,0,0.3);  padding: var(--space-md);}.event-item {  padding: 0.75rem;  border-bottom: 1px solid rgba(255,255,255,0.05);  display: flex;  gap: 1rem;  align-items: flex-start;}.event-item:last-child {  border-bottom: none;}.event-time {  font-size: var(--text-xs);  color: var(--text-muted);  white-space: nowrap;  font-family: monospace;}.event-content {  flex: 1;}.event-header {  display: flex;  align-items: center;  gap: 0.5rem;  margin-bottom: 0.25rem;}.event-severity {  font-size: var(--text-xs);  font-weight: 800;  padding: 0.125rem 0.5rem;  border-radius: var(--radius-sm);  text-transform: uppercase;}.event-severity.info {  background: rgba(34,211,238,0.15);  color: var(--brand-glow);}.event-severity.warn {  background: rgba(245,158,11,0.15);  color: var(--warning);}.event-severity.error {  background: rgba(239,68,68,0.15);  color: var(--danger);}.event-tag {  font-size: var(--text-xs);  color: var(--text-muted);  font-family: monospace;}.event-title {  font-size: var(--text-sm);  font-weight: 700;  color: var(--text);  margin-bottom: 0.125rem;}.event-message {  font-size: var(--text-sm);  color: var(--text-muted);}/* Toast Notifications */.toast-container {  position: fixed;  top: 2rem;  right: 2rem;  z-index: 10000;  display: flex;  flex-direction: column;  gap: 0.75rem;}.toast {  padding: 1rem 1.5rem;  border-radius: var(--radius-lg);  background: rgba(15,20,37,0.95);  border: 1px solid rgba(255,255,255,0.1);  box-shadow: var(--shadow-lg);  backdrop-filter: blur(var(--blur));  min-width: 300px;  animation: slideIn 0.3s ease-out;}@keyframes slideIn {  from {    transform: translateX(400px);    opacity: 0;  }  to {    transform: translateX(0);    opacity: 1;  }}.toast.success {  border-color: rgba(0,255,136,0.4);}.toast.error {  border-color: rgba(239,68,68,0.4);}.toast-content {  display: flex;  align-items: center;  gap: 0.75rem;}.toast-icon {  display: inline-flex;  align-items: center;  justify-content: center;  width: var(--icon-md);  height: var(--icon-md);  color: currentColor;}.toast-text {  flex: 1;}.toast-title {  font-size: var(--text-sm);  font-weight: 800;  margin-bottom: 0.25rem;}.toast.success .toast-title {  color: var(--good);}.toast.error .toast-title {  color: var(--danger);}/* Helpers for app layout */.hero-title-lg {  font-size: clamp(2rem, 5vw, 3.5rem);}.badge-up {  background: rgba(0,255,136,0.1);  border-color: rgba(0,255,136,0.3);  color: var(--good);}.pill-row {  display: flex;  gap: var(--space-sm);  flex-wrap: wrap;  margin-top: var(--space-md);}.notice {  margin-top: var(--space-md);  padding: var(--space-md);  border-radius: var(--radius-md);  border: 1px solid rgba(255,255,255,0.15);  background: rgba(255,255,255,0.04);}.notice-good {  border-color: rgba(0,255,136,0.3);  background: rgba(0,255,136,0.08);}.notice-bad {  border-color: rgba(255,71,87,0.3);  background: rgba(255,71,87,0.08);}.stack {  margin-top: var(--space-md);  display: flex;  flex-direction: column;  gap: 0.5rem;}.heading-row {  display: flex;  align-items: center;  justify-content: space-between;  gap: var(--space-md);  flex-wrap: wrap;}.hidden {  display: none;}.toast-message {  font-size: var(--text-xs);  color: var(--text-muted);}/* Copy Button Enhancement */.btn-copy-inline {  margin-left: 0.5rem;  padding: 0.25rem 0.5rem;  font-size: var(--text-xs);  vertical-align: middle;}/* Payload Preview */.payload-preview {  margin-top: var(--space-sm);  padding: var(--space-sm);  background: rgba(0,0,0,0.4);  border: 1px solid rgba(124,92,255,0.2);  border-radius: var(--radius-md);  font-family: monospace;  font-size: var(--text-xs);  line-height: 1.5;  overflow-x: auto;  white-space: pre;  max-height: 300px;  overflow-y: auto;}/* Proof Row */.proof-row {  display: flex;  gap: 0.75rem;  flex-wrap: wrap;  justify-content: center;  margin: var(--space-lg) 0;}/* Mobile Adjustments */@media (max-width: 768px) {  .toast-container {    right: 1rem;    left: 1rem;  }    .toast {    min-width: auto;  }    .steps-progress {    gap: 0.5rem;  }    .step-indicator {    padding: 0.375rem 0.75rem;    font-size: var(--text-xs);  }    .presets-grid {    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));  }}