/* Mule Account Detection */

:root {
  --primary: #7c3aed;
  --surface: #ffffff;
  --radius-lg: 12px;
  --radius-md: 8px;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, #f3e8ff 0%, #ddd6fe 100%);
  min-height: 100vh;
  color: #1e293b;
}

.app-container { max-width: 600px; margin: 0 auto; padding: 20px; }
header { text-align: center; margin-bottom: 32px; }

.controls { display: flex; gap: 12px; margin-bottom: 24px; }
.primary-btn { padding: 12px 24px; background: var(--primary); color: white; border: none; border-radius: 8px; cursor: pointer; }
.secondary-btn { padding: 12px 24px; background: transparent; color: var(--primary); border: 1px solid var(--primary); border-radius: 8px; cursor: pointer; }

.results { background: #fff; padding: 20px; border-radius: 12px; margin-bottom: 24px; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.metric-card { text-align: center; padding: 16px; background: #f8fafc; border-radius: 8px; }
.metric-value { font-size: 1.5rem; font-weight: bold; color: var(--primary); }
.metric-label { font-size: 0.8rem; color: #64748b; }

.transactions { background: #fff; padding: 20px; border-radius: 12px; }
.txn-list { max-height: 300px; overflow-y: auto; }
.txn-item { padding: 12px; border-bottom: 1px solid #e2e8f0; font-size: 0.9rem; }
.txn-item.suspicious { background: #fef2f2; border-left: 3px solid #ef4444; }