/* ELITE WHITE-PURPLE DESIGN SYSTEM - NAMESPACE .aud- */
.aud-wrapper {
  margin-left: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

.aud-glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* HEADER */
.aud-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 32px; }
.aud-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: 1px; background: linear-gradient(135deg, #fff, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; }
.aud-subtitle { margin: 4px 0 0; color: #a1a1aa; font-size: 14px; }
.aud-header-right { display: flex; gap: 16px; align-items: center; }
.aud-chain-status { display: flex; align-items: center; gap: 8px; background: rgba(34,197,94,0.1); padding: 8px 16px; border-radius: 12px; font-size: 13px; font-weight: 800; border: 1px solid rgba(34,197,94,0.3); }

/* STATS GRID */
.aud-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.aud-stat-card { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.aud-stat-title { font-size: 11px; font-weight: 800; color: #a1a1aa; text-transform: uppercase; letter-spacing: 1px; }
.aud-stat-value { font-size: 32px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.aud-stat-trend { font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; width: max-content; }
.aud-stat-trend.up { color: #22c55e; background: rgba(34,197,94,0.1); }
.aud-stat-trend.down { color: #ef5350; background: rgba(239,83,80,0.1); }
.aud-stat-trend.stable { color: #a1a1aa; background: rgba(255,255,255,0.05); }

/* SUSPICIOUS BANNER */
.aud-suspicious-banner { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-left: 4px solid #fbbf24; background: linear-gradient(90deg, rgba(251,191,36,0.1), transparent); }
.aud-susp-info h4 { margin: 0 0 4px; font-size: 15px; color: #fbbf24; }
.aud-susp-info p { margin: 0; font-size: 13px; color: #e4e4e7; }
.aud-susp-actions { display: flex; gap: 12px; }

/* CONTROLS */
.aud-controls { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px 24px; align-items: center; justify-content: space-between; }
.aud-search-box { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.4); padding: 10px 16px; border-radius: 12px; flex: 1; min-width: 250px; border: 1px solid rgba(255,255,255,0.1); transition: border-color 0.3s; }
.aud-search-box:focus-within { border-color: #c084fc; box-shadow: 0 0 10px rgba(168,85,247,0.2); }
.aud-search-box i { color: #a1a1aa; }
.aud-search-box input { background: transparent; border: none; color: #fff; width: 100%; outline: none; font-family: 'Inter'; font-size: 14px; }
.aud-filters { display: flex; gap: 12px; }
.aud-select { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: #e4e4e7; padding: 10px 16px; border-radius: 12px; outline: none; font-family: 'Inter'; font-size: 13px; cursor: pointer; }

/* TIMELINE LIST */
.aud-timeline-container { display: flex; flex-direction: column; overflow: hidden; }
.aud-timeline-header { display: flex; padding: 16px 24px; background: rgba(0,0,0,0.4); border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 11px; font-weight: 800; color: #a1a1aa; text-transform: uppercase; letter-spacing: 1px; }
.aud-col-time { width: 180px; }
.aud-col-event { flex: 2; }
.aud-col-actor { flex: 1.5; }
.aud-col-hash { width: 100px; text-align: right; }

.aud-timeline-body { display: flex; flex-direction: column; }
.aud-row { display: flex; padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,0.02); cursor: pointer; transition: background 0.3s; align-items: center; }
.aud-row:hover { background: rgba(255,255,255,0.03); }
.aud-row-time { font-size: 12px; color: #a1a1aa; width: 180px; }
.aud-row-event { flex: 2; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.aud-row-actor { flex: 1.5; font-size: 12px; color: #e4e4e7; display: flex; flex-direction: column; gap: 4px; }
.aud-row-hash { width: 100px; text-align: right; font-family: monospace; font-size: 12px; color: #06b6d4; background: rgba(6,182,212,0.1); padding: 4px 8px; border-radius: 4px; }

.aud-sev-dot { width: 8px; height: 8px; border-radius: 50%; }
.aud-sev-info { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.aud-sev-warning { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.aud-sev-critical { background: #ef5350; box-shadow: 0 0 10px #ef5350; animation: audPulseRed 2s infinite; }

.aud-pagination { padding: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); }

/* DRAWER */
.aud-drawer-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.aud-drawer-overlay.active { opacity: 1; pointer-events: auto; }
.aud-drawer { position: fixed; top: 0; right: -700px; width: 700px; max-width: 100vw; height: 100vh; z-index: 1001; transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; background: rgba(10,10,15,0.95); border-left: 1px solid rgba(255,255,255,0.1); }
.aud-drawer.active { right: 0; }
.aud-drawer-close { position: absolute; top: 24px; right: 24px; background: rgba(255,255,255,0.1); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; z-index: 10; transition: background 0.3s; }
.aud-drawer-close:hover { background: #ef5350; }
.aud-drawer-content { padding: 48px 40px; overflow-y: auto; height: 100%; display: flex; flex-direction: column; gap: 24px; }

/* DRAWER DETAILS */
.aud-detail-header h2 { font-size: 20px; font-weight: 800; margin: 0 0 8px; display: flex; align-items: center; gap: 12px; }
.aud-detail-meta { font-size: 13px; color: #a1a1aa; margin: 0 0 24px; }
.aud-payload-box { background: #000; border: 1px solid rgba(255,255,255,0.1); padding: 16px; border-radius: 8px; font-family: monospace; font-size: 12px; color: #c084fc; white-space: pre-wrap; word-break: break-all; overflow-x: auto; }
.aud-hash-box { background: rgba(6,182,212,0.1); border-left: 4px solid #06b6d4; padding: 16px; border-radius: 8px; font-family: monospace; font-size: 12px; color: #e4e4e7; line-height: 1.6; }
.aud-hash-label { color: #06b6d4; font-weight: 700; margin-right: 8px; }

/* MODALS */
.aud-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 2000; }
.aud-modal.active { display: flex; animation: audFadeIn 0.3s forwards; }
.aud-modal-card { width: 100%; max-width: 500px; padding: 32px; position: relative; }
.aud-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 16px; }
.aud-modal-header h3 { font-size: 18px; margin: 0; display: flex; align-items: center; gap: 8px; }
.aud-btn-close { background: transparent; border: none; color: #a1a1aa; font-size: 24px; cursor: pointer; transition: color 0.3s; }
.aud-btn-close:hover { color: #ef5350; }

.aud-progress-bar { width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.aud-progress-fill { height: 100%; background: #22c55e; transition: width 0.1s linear; }
.aud-verify-log { background: #000; font-family: monospace; font-size: 11px; color: #22c55e; padding: 12px; height: 120px; overflow-y: auto; border-radius: 6px; border: 1px solid rgba(34,197,94,0.3); }
.aud-checkbox { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #e4e4e7; cursor: pointer; }
.aud-checkbox input { accent-color: #a855f7; width: 16px; height: 16px; cursor: pointer; }

/* BUTTONS */
.aud-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer; transition: all 0.3s; border: none; font-family: 'Inter'; text-transform: uppercase; letter-spacing: 0.5px; }
.aud-btn-primary { background: #a855f7; color: #fff; }
.aud-btn-primary:hover { background: #c084fc; box-shadow: 0 0 20px rgba(168,85,247,0.4); }
.aud-btn-outline { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.aud-btn-outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.aud-btn-danger { background: rgba(239,83,80,0.1); color: #ef5350; border: 1px solid rgba(239,83,80,0.4); }
.aud-btn-danger:hover { background: #ef5350; color: #fff; box-shadow: 0 0 20px rgba(239,83,80,0.4); }

/* ANIMATIONS */
@keyframes audPulseRed { 0% { box-shadow: 0 0 0 0 rgba(239,83,80,0.4); } 70% { box-shadow: 0 0 0 10px rgba(239,83,80,0); } 100% { box-shadow: 0 0 0 0 rgba(239,83,80,0); } }
@keyframes audFadeIn { from { opacity: 0; } to { opacity: 1; } }