harshapitla/stackoverflow

1:root{2  --bg: #f7f8fb;3  --card: #ffffff;4  --muted: #6b7280;5  --accent: #2563eb;6  --shadow: 0 6px 18px rgba(16,24,40,0.06);7  --radius: 12px;8}9 10* { box-sizing: border-box; }11html,body,#root { height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: var(--bg); color: #0f172a; }12 13.app-container { max-width: 1200px; margin: 28px auto; padding: 20px; }14.header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }15.app-title { font-size:20px; font-weight:700; }16.app-sub { color:var(--muted); font-size:13px; }17 18.grid { display:grid; gap:20px; grid-template-columns: repeat(3,1fr); }19@media (max-width: 1000px){ .grid { grid-template-columns: repeat(2,1fr); } }20@media (max-width: 640px){ .grid { grid-template-columns: 1fr; } }21 22.card {23  background: var(--card);24  border-radius: var(--radius);25  box-shadow: var(--shadow);26  padding: 14px;27  min-height: 200px;28  display:flex;29  flex-direction:column;30}31 32.card h3 { margin:0 0 8px 0; font-size:16px; }33.card p { margin:0; color:var(--muted); font-size:13px; }34 35.chart-area { flex:1; min-height:180px; display:flex; align-items:center; justify-content:center; }36.table-preview { width:100%; overflow:auto; border-radius:8px; border:1px solid #eef2ff; background:#fff; padding:8px; }37.table-preview table { width:100%; border-collapse:collapse; }38.table-preview th, .table-preview td { padding:8px; text-align:left; border-bottom:1px solid #f1f5f9; font-size:13px; }39.small { font-size:12px; color:var(--muted); }40