| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background-color: #f0f2f5; |
| margin: 0; |
| padding: 0; |
| color: #333; |
| } |
|
|
| .container { |
| max-width: 1000px; |
| margin: 40px auto; |
| padding: 0 20px; |
| } |
|
|
| |
| header { |
| text-align: center; |
| margin-bottom: 40px; |
| } |
|
|
| header h1 { |
| font-size: 2.2em; |
| margin-bottom: 5px; |
| } |
|
|
| header .subtitle { |
| font-size: 1em; |
| color: #555; |
| } |
|
|
| |
| .card { |
| background-color: #fff; |
| border-radius: 8px; |
| padding: 20px; |
| margin-bottom: 30px; |
| box-shadow: 0 2px 6px rgba(0,0,0,0.1); |
| } |
|
|
| |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
|
|
| th, td { |
| padding: 8px 12px; |
| text-align: center; |
| border-bottom: 1px solid #ddd; |
| } |
|
|
| th { |
| background-color: #f7f7f7; |
| color: #333; |
| } |
|
|
| tr:hover { |
| background-color: #f1f1f1; |
| } |
|
|
| |
| button { |
| background-color: #4CAF50; |
| color: white; |
| padding: 8px 16px; |
| border: none; |
| border-radius: 4px; |
| cursor: pointer; |
| } |
|
|
| button:hover { |
| background-color: #45a049; |
| } |
|
|
| |
| #drift-chart { |
| min-height: 300px; |
| } |
|
|
| |
| @media(max-width: 768px){ |
| .container { |
| padding: 0 10px; |
| } |
|
|
| table, th, td { |
| font-size: 0.9em; |
| } |
| } |
|
|
| |
| footer { |
| text-align: center; |
| font-size: 0.85em; |
| color: #777; |
| margin-top: 40px; |
| } |
|
|
