#1a0a2e 0%, #0f0a1e 100%); } .emff-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; } .emff-met { background: rgba(0,0,0,0.5); border-left: 3px solid #ff3366; padding: 14px; } .emff-met-lbl { font-size: 10px; color: #888; text-transform: uppercase; margin-bottom: 4px; } .emff-met-val { font-size: 20px; font-weight: 700; color: #ff3366; } .emff-met-unit { font-size: 10px; color: #666; margin-top: 2px; } .emff-canvas-wrap { background: #000; border: 1px solid rgba(255,51,102,0.3); border-top: 3px solid #ff3366; margin-bottom: 15px; } .emff-canvas-hdr { display: flex; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid rgba(255,51,102,0.2); } .emff-canvas-lbl { font-size: 12px; color: #ff3366; text-transform: uppercase; letter-spacing: 1px; } canvas#emffCanvas { width: 100%; height: 380px; display: block; } .emff-log { background: rgba(0,0,0,0.7); border: 1px solid rgba(255,51,102,0.2); padding: 12px; height: 120px; overflow-y: auto; font-family: monospace; font-size: 12px; } .emff-le { color: #888; margin-bottom: 3px; } .emff-le.i { color: #ff3366; } .emff-le.s { color: #00ff88; } .emff-le.w { color: #ffaa00; } .emff-footer { background: rgba(0,0,0,0.95); padding: 12px 40px; border-top: 2px solid #ff3366; display: flex; justify-content: space-between; align-items: center; } .emff-status { font-size: 12px; color: #888; } .emff-exp { background: #ff3366; color: #fff; padding: 9px 22px; border: none; cursor: pointer; font-weight: 700; font-size: 12px; text-transform: uppercase; margin-left: 8px; transition: all 0.3s; } .emff-exp:hover { background: #ff5580; box-shadow: 0 0 12px #ff3366; }