.metrics-display{display:flex;gap:2rem;margin:2rem 0;flex-wrap:wrap}.metrics-display.horizontal{flex-direction:row;justify-content:center}.metrics-display.vertical{flex-direction:column;align-items:center}.metrics-display.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.metric-item{display:flex;align-items:center;gap:1rem;padding:1.5rem;background:var(--card-background,#fff);border:1px solid var(--border-color,#e0e0e0);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:transform .2s ease,box-shadow .2s ease;min-width:200px;flex:1}.metric-item:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}.metric-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:linear-gradient(135deg,var(--accent-color,#007acc),var(--accent-hover-color,#005fa3));border-radius:50%;color:#fff;flex-shrink:0}.metric-content{flex:1}.metric-value{font-size:2rem;font-weight:700;color:var(--accent-color,#007acc);line-height:1;margin-bottom:.25rem}.metric-label{font-size:1rem;font-weight:600;color:var(--text-color,#333);margin-bottom:.25rem}.metric-description{font-size:.9rem;color:var(--secondary-text-color,#666);line-height:1.4}.metrics-display.highlight .metric-item{background:linear-gradient(135deg,var(--accent-color,#007acc)10,transparent);border-color:var(--accent-color,#007acc)}.metrics-display.minimal .metric-item{background:transparent;border:none;box-shadow:none;padding:1rem}.metrics-display.minimal .metric-item:hover{transform:none;box-shadow:none}.metrics-display.card .metric-item{flex-direction:column;text-align:center;padding:2rem 1.5rem}.metrics-display.card .metric-icon{margin-bottom:1rem}[data-theme=dark] .metric-item{background:var(--card-background,#2a2a2a);border-color:var(--border-color,#444)}[data-theme=dark] .metric-value{color:var(--accent-color,#4299e1)}[data-theme=dark] .metric-label{color:var(--off-white,#e0e0e0)}[data-theme=dark] .metric-description{color:var(--secondary-text-color,#999)}@media (max-width:768px){.metrics-display{gap:1rem}.metrics-display.horizontal{flex-direction:column}.metric-item{padding:1rem;min-width:unset}.metric-value{font-size:1.5rem}.metric-icon{width:40px;height:40px}}@media (max-width:480px){.metrics-display{gap:.75rem}.metric-item{padding:.75rem;gap:.75rem}.metric-value{font-size:1.25rem}.metric-label{font-size:.9rem}.metric-description{font-size:.8rem}}