* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dashboard-container {
  width: 100%;
  max-width: 1400px;
  background: linear-gradient(145deg, rgba(26, 26, 46, 0.95), rgba(15, 15, 30, 0.98));
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 0 40px rgba(0, 255, 170, 0.1), 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  border: 1px solid rgba(0, 255, 170, 0.2);
  position: relative;
  overflow: hidden;
}
.dashboard-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 255, 170, 0.03) 0%, transparent 70%);
  animation: pulse 8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .5;} 50% { transform: scale(1.1); opacity: 1;}}
.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; position: relative; z-index: 1; }
.header-left { display: flex; align-items: center; gap: 16px; }
.brand-title { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -0.5px; }
.brand-subtitle { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 4px; }
.header-indicators { display: flex; align-items: center; gap: 16px; }
.time-range-indicator { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; }
.time-icon { width: 18px; height: 18px; background: linear-gradient(135deg, #00ffaa, #00d495); border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#0f0f1e; }
.time-range-text { color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }
.protection-mini { display:flex; align-items:center; gap:12px; padding:8px 16px; background: linear-gradient(135deg, rgba(0,255,170,0.1), rgba(0,255,170,0.05)); border:1px solid rgba(0,255,170,0.3); border-radius:20px; }
.protection-mini-ring { width:28px; height:28px; border-radius:50%; background: conic-gradient(from 0deg, #00ffaa var(--pdeg, 0deg), rgba(255,255,255,0.2) var(--pdeg, 0deg) 360deg); display:flex; align-items:center; justify-content:center; animation: rotate 30s linear infinite;}
.protection-mini-inner { width:20px; height:20px; border-radius:50%; background: linear-gradient(145deg, rgba(26,26,46,1), rgba(15,15,30,1));}
.protection-text { display:flex; align-items:baseline; gap:6px; }
.protection-value { color:#00ffaa; font-size:16px; font-weight:700; }
.protection-label { color: rgba(255,255,255,0.6); font-size:11px; text-transform: uppercase; }
@keyframes rotate { from { transform: rotate(0)} to { transform: rotate(360deg)}}
.metrics-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; position: relative; z-index:1; margin-bottom:24px; }
.metric-card { background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:20px; position:relative; overflow:hidden; transition: all .3s ease;}
.metric-card:hover { transform: translateY(-2px); border-color: rgba(0,255,170,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.3);}
.metric-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, var(--metric-color, #00ffaa), transparent); animation: scanLine 3s linear infinite;}
@keyframes scanLine { 0% { transform: translateX(-100%)} 100% { transform: translateX(100%)}}
.metric-header { display:flex; justify-content: space-between; align-items: flex-start; margin-bottom:12px; }
.metric-title { font-size:11px; color: rgba(255,255,255,0.7); font-weight:500; text-transform: uppercase; letter-spacing:.5px; }
.metric-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:8px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8);}
.metric-value { font-size:28px; font-weight:700; color:#fff; margin-bottom:8px; font-variant-numeric: tabular-nums; transition: all .3s ease;}
.metric-change { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:500; color:#00ffaa; }
.metric-chart { margin-top:12px; height:32px; position:relative; overflow:hidden;}
.mini-chart { position:absolute; bottom:0; left:0; right:0; height:100%; display:flex; align-items:flex-end; gap:2px; }
.chart-bar { flex:1; background: linear-gradient(to top, var(--bar-color, rgba(0,255,170,.6)), transparent); border-radius: 2px 2px 0 0; transition: height .5s ease; }
.module-activity-feed { margin-top:24px; padding:16px; background: rgba(0,0,0,0.2); border-radius:12px; border:1px solid rgba(255,255,255,0.05); position:relative; z-index:1; max-height:400px; overflow-y:auto; }
.module-activity-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.module-activity-title { font-size:12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px;}
.module-activity-counter { font-size:11px; color: rgba(0,255,170,0.7);}
.activity-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.05); animation: slideIn .5s ease;}
@keyframes slideIn { from { opacity:0; transform: translateX(-20px)} to { opacity:1; transform: translateX(0)}}
.activity-module-indicator { width:8px; height:8px; border-radius:50%; flex-shrink:0; box-shadow: 0 0 8px var(--module-color);}
.activity-content { flex:1; display:flex; justify-content: space-between; align-items:center; }
.activity-text { font-size:13px; color: rgba(255,255,255,0.85); }
.activity-time { font-size:11px; color: rgba(255,255,255,0.4); white-space: nowrap;}
.module-protect { background:#00ff88; --module-color:#00ff88;}
.module-comply { background:#b366ff; --module-color:#b366ff;}
.module-brandguard { background:#4da6ff; --module-color:#4da6ff;}
.module-certify { background:#ffaa00; --module-color:#ffaa00;}
.stats-summary { margin-top:24px; padding:20px; background: linear-gradient(135deg, rgba(0,255,170,0.05), rgba(0,255,170,0.01)); border-radius:12px; border:1px solid rgba(0,255,170,0.2); display:flex; justify-content: space-around; position:relative; z-index:1;}
.summary-item { text-align:center;}
.summary-label { font-size:11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing:1px; margin-bottom:8px;}
.summary-value { font-size:24px; font-weight:700; color:#00ffaa;}
.compliance-disclaimer { margin-top:16px; padding:12px; background: rgba(255,255,255,0.02); border-radius:8px; border:1px solid rgba(255,255,255,0.05); text-align:center; position:relative; z-index:1;}
.disclaimer-text { font-size:11px; color: rgba(255,255,255,0.4); letter-spacing:.3px; }
.module-activity-feed::-webkit-scrollbar { width:6px;}
.module-activity-feed::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius:3px;}
.module-activity-feed::-webkit-scrollbar-thumb { background: rgba(0,255,170,0.3); border-radius:3px;}
.module-activity-feed::-webkit-scrollbar-thumb:hover { background: rgba(0,255,170,0.5);}