Apply LiveView style to Leaderboard: add AMA gradient, improve colors and card design

src/views/LeaderboardView.vue

@@ -24,7 +24,7 @@
           <div class="col-panel desktop-filter-panel" style="flex: 1; min-width: 280px;">
             <Card class="mb-2 card-full compact-card content-card">
               <template #title>
-                <div class="mb-4 text-900" style="font-size: 20px; font-weight: 600">Filter Matrix</div>
+                <div class="mb-4 ama-gradient" style="font-size: 20px; font-weight: 800">Filter Matrix</div>
                 <Divider />
               </template>
               <template #content>
@@ -325,32 +325,69 @@ export default {
 </script>
 
 <style scoped>
+/* ===== AMA Color Variables (from LiveView) ===== */
+:root {
+  --ama-start: 0,0,185;
+  --ama-mid: 123,44,191;
+  --ama-end: 240,0,15;
+  --gold: #d4af37;
+  --silver: #c0c0c0;
+  --bronze: #cd7f32;
+  --ink-900: #0f172a;
+  --ink-700: #334155;
+  --ink-600: #64748b;
+  --bd-soft: #E7ECF3;
+  --pos-fg: #0e7a3a;
+  --pos-bg: #f0fdf4;
+  --pos-br: #bbf7d0;
+  --neg-fg: #B91C1C;
+  --neg-bg: #fef2f2;
+  --neg-br: #fecaca;
+}
+
+/* ===== AMA Gradient ===== */
+.ama-gradient {
+  background: linear-gradient(90deg, rgb(0,0,185), #7b2cbf 40%, #d946ef 70%, rgb(240,0,15));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
 .page-wrapper {
     max-width: 1600px;
     margin: 0 auto;
-    padding: 0 1rem 1rem 1rem;
+    padding: 16px 20px 60px;
+    background: #fff;
 }
 
 .title-container {
     text-align: center;
+    margin-bottom: 24px;
 }
 
 .main-title {
     font-size: 2rem;
     letter-spacing: -0.02em;
     font-weight: 800;
-    color: #1f1f33;
+    color: var(--ink-900);
 }
 .loading-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(255, 255, 255, 0.85);
+  background: rgba(255, 255, 255, 0.95);
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.loading-box { text-align: center; }
+
+.loading-box {
+  text-align: center;
+  padding: 32px;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+}
 
 .card--with-divider :deep(.p-card-title) {
   border-bottom: 1px solid var(--surface-200);
@@ -360,14 +397,52 @@ export default {
 
 /* equal-height for side-by-side cards */
 .col-panel { display: flex; }
-.card-full { width: 100%; display: flex; flex-direction: column; }
-.card-full :deep(.p-card-body) { display: flex; flex-direction: column; height: 100%; }
-.card-full :deep(.p-card-content) { flex: 1; display: flex; flex-direction: column; }
+.card-full {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border: 1px solid var(--bd-soft);
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
+  transition: all 0.2s ease;
+}
+
+.card-full:hover {
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.1);
+  transform: translateY(-1px);
+}
+
+.card-full :deep(.p-card-body) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card-full :deep(.p-card-content) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
 
 /* compact spacing for higher information density */
-.compact-card :deep(.p-card-body) { padding: 0.75rem; }
-.compact-card :deep(.p-card-content) { padding-top: 0; padding-bottom: 0; overflow-y: auto; }
-.compact-card :deep(.p-card-title) { margin-bottom: 0.5rem; }
+.compact-card :deep(.p-card-body) {
+  padding: 20px;
+}
+
+.compact-card :deep(.p-card-content) {
+  padding-top: 0;
+  padding-bottom: 0;
+  overflow-y: auto;
+}
+
+.compact-card :deep(.p-card-title) {
+  margin-bottom: 16px;
+  font-size: 20px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--ink-900);
+}
 
 /* datatable compact paddings */
 :deep(.p-datatable .p-datatable-header) { padding: 0.5rem 0.75rem; }
@@ -465,5 +540,55 @@ export default {
 :deep(.filter-drawer .p-drawer-content) {
   padding: 1rem;
 }
+
+/* ===== Button Improvements ===== */
+:deep(.p-button) {
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  transition: all 0.2s ease;
+}
+
+:deep(.p-button:not(.p-button-text):not(.p-button-outlined):hover) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+/* ===== Empty State ===== */
+.empty-offset > span {
+  color: var(--ink-600);
+  font-size: 16px;
+}
+
+/* ===== Divider ===== */
+:deep(.p-divider) {
+  margin: 0.5rem 0;
+  border-color: var(--bd-soft);
+}
+
+/* ===== DataTable Improvements ===== */
+:deep(.p-datatable) {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+:deep(.p-datatable .p-datatable-thead > tr > th) {
+  background: #F6F8FB;
+  color: var(--ink-700);
+  font-weight: 700;
+  border-color: var(--bd-soft);
+}
+
+:deep(.p-datatable .p-datatable-tbody > tr) {
+  transition: background 0.15s ease;
+}
+
+:deep(.p-datatable .p-datatable-tbody > tr:hover) {
+  background: #F6F8FB;
+}
+
+:deep(.p-datatable .p-datatable-tbody > tr > td) {
+  border-color: var(--bd-soft);
+  color: var(--ink-700);
+}
 </style>