@agentunion/kite 1.5.0 → 1.6.0

package/extensions/services/evol/web/src/components/team/stats/stats.css

@@ -0,0 +1,741 @@
+/* ==================== 团队统计面板样式 ==================== */
+
+.team-stats-panel {
+  border-radius: 12px;
+  padding: 24px;
+  margin-top: 24px;
+}
+
+/* Header */
+.stats-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.title-with-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.stats-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary, #1a1a1a);
+  margin: 0;
+}
+
+.toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: var(--text-muted, #6b7280);
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s;
+  padding: 0;
+  font-size: 12px;
+}
+
+.toggle-btn:hover {
+  background: var(--border-color, #f3f4f6);
+  color: var(--text-primary, #374151);
+}
+
+.toggle-icon {
+  transition: transform 0.3s ease;
+  display: inline-block;
+}
+
+.toggle-icon.rotated {
+  transform: rotate(-90deg);
+}
+
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.mode-selector {
+  display: flex;
+  gap: 4px;
+  background: var(--border-color, #f3f4f6);
+  padding: 4px;
+  border-radius: 8px;
+}
+
+.mode-btn {
+  padding: 6px 16px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-muted, #6b7280);
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+  font-family: inherit;
+}
+
+.mode-btn:hover { color: var(--text-primary, #374151); }
+
+.mode-btn.active {
+  background: var(--bg-primary, white);
+  color: var(--primary, #0ea5e9);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* Realtime indicator */
+.realtime-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background: #ecfdf5;
+  border: 1px solid #a7f3d0;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #059669;
+}
+
+.pulse-dot {
+  width: 8px;
+  height: 8px;
+  background: #10b981;
+  border-radius: 50%;
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.2); }
+}
+
+/* Date controls */
+.date-controls {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.range-select,
+.member-select {
+  padding: 8px 12px;
+  border: 1px solid var(--border-color, #d1d5db);
+  border-radius: 8px;
+  font-size: 13px;
+  cursor: pointer;
+  background: var(--bg-primary, white);
+  color: var(--text-primary, #374151);
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.range-select:hover,
+.member-select:hover:not(:disabled) { border-color: var(--primary, #0ea5e9); }
+
+.range-select:focus,
+.member-select:focus {
+  outline: none;
+  border-color: var(--primary, #0ea5e9);
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+}
+
+.member-select { min-width: 140px; }
+.member-select:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.custom-date-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.date-picker {
+  padding: 8px 12px;
+  border: 1px solid var(--border-color, #d1d5db);
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  background: var(--bg-primary, white);
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.date-picker:hover { border-color: var(--primary, #0ea5e9); }
+.date-picker:focus { outline: none; border-color: var(--primary, #0ea5e9); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); }
+
+.date-nav-btn {
+  padding: 8px 12px;
+  border: 1px solid var(--border-color, #d1d5db);
+  border-radius: 8px;
+  background: var(--bg-primary, white);
+  color: var(--text-primary, #374151);
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  font-weight: 600;
+}
+
+.date-nav-btn:hover:not(:disabled) {
+  background: var(--primary, #0ea5e9);
+  border-color: var(--primary, #0ea5e9);
+  color: white;
+  transform: translateY(-1px);
+}
+
+.date-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* Refresh button */
+.refresh-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--border-color, #d1d5db);
+  border-radius: 8px;
+  background: var(--bg-primary, white);
+  color: var(--text-muted, #6b7280);
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 16px;
+}
+
+.refresh-btn:hover { border-color: var(--primary, #0ea5e9); color: var(--primary, #0ea5e9); }
+.refresh-btn.loading { opacity: 0.7; cursor: not-allowed; }
+
+.refresh-icon { display: inline-block; transition: transform 0.3s; }
+.refresh-icon.spinning { animation: spin 0.6s linear infinite; }
+
+/* Loading */
+.loading-state,
+.hourly-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 40px 20px;
+  color: var(--text-muted, #6b7280);
+  font-size: 14px;
+}
+
+.spinner-small {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--border-color, #e5e7eb);
+  border-top-color: var(--primary, #0ea5e9);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Collapsible */
+.collapsible-content {
+  animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Summary Row */
+.stats-summary-row {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  align-items: stretch;
+}
+
+.summary-card {
+  padding: 10px 16px;
+  border-radius: 10px;
+  border: 1px solid var(--border-color, #e5e7eb);
+  transition: all 0.2s;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.summary-card.compact { min-height: auto; flex: 0 0 auto; }
+.summary-card.pie-card { flex: 1; min-width: 0; }
+.summary-card:hover { box-shadow: 0 4px 12px rgba(14, 165, 233, 0.12); border-color: var(--primary, #0ea5e9); }
+
+.summary-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted, #9ca3af);
+  margin-bottom: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.summary-value {
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--text-primary, #1a1a1a);
+  margin-bottom: 2px;
+  line-height: 1;
+}
+
+.summary-value.primary {
+  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.summary-subtitle {
+  font-size: 11px;
+  color: var(--text-muted, #6b7280);
+  font-weight: 500;
+}
+
+.pie-chart-container { width: 100%; height: 90px; }
+
+/* Section subtitle */
+.section-subtitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary, #374151);
+  margin: 0 0 16px 0;
+}
+
+.title-with-toggle .section-subtitle { margin: 0; }
+
+/* ECharts */
+.echarts-line-container { width: 100%; height: 280px; }
+
+/* Hourly chart section */
+.hourly-chart-section,
+.trend-stats-section {
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+  border: 1px solid var(--border-color, #e5e7eb);
+}
+
+.hourly-chart-header,
+.trend-stats-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.trend-stats-header { align-items: flex-start; }
+
+.hourly-controls,
+.trend-stats-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.hourly-summary {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--text-muted, #6b7280);
+}
+
+.hourly-total { display: flex; align-items: center; gap: 4px; }
+.hourly-total strong { color: var(--primary, #0ea5e9); font-size: 15px; }
+
+.hourly-count {
+  padding: 4px 10px;
+  background: var(--border-color, #f3f4f6);
+  border-radius: 12px;
+  font-size: 12px;
+}
+
+.hourly-chart { display: flex; flex-direction: column; gap: 16px; }
+
+.hourly-no-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 40px 20px;
+  color: var(--text-muted, #9ca3af);
+}
+
+.hourly-no-data p { margin: 0; font-size: 13px; }
+
+/* Period selector */
+.period-selector {
+  display: flex;
+  gap: 4px;
+  background: var(--border-color, #f3f4f6);
+  padding: 4px;
+  border-radius: 8px;
+}
+
+.period-btn {
+  padding: 6px 12px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted, #6b7280);
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+  font-family: inherit;
+}
+
+.period-btn:hover:not(:disabled) { color: var(--text-primary, #374151); background: rgba(255,255,255,0.5); }
+.period-btn.active { background: var(--bg-primary, white); color: var(--primary, #0ea5e9); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+.period-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Legend */
+.hourly-legend {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  flex-wrap: wrap;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-color, #f3f4f6);
+}
+
+.hourly-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-primary, #374151);
+}
+
+.hourly-legend-item .legend-dot,
+.legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.hourly-legend-item.chatbot .legend-dot { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
+.hourly-legend-item.codex .legend-dot { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
+.hourly-legend-item.claudecode .legend-dot { background: linear-gradient(135deg, #f59e0b, #f97316); }
+.hourly-legend-item.gemini .legend-dot { background: linear-gradient(135deg, #ec4899, #f43f5e); }
+.hourly-legend-item.openclaw .legend-dot { background: linear-gradient(135deg, #f59e0b, #d97706); }
+
+/* Member Ranking */
+.member-ranking { margin-bottom: 0; }
+
+.ranking-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  gap: 16px;
+}
+
+.export-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+  font-family: inherit;
+}
+
+.export-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
+.export-btn:active { transform: translateY(0); }
+
+/* Table */
+.ranking-table-container {
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.ranking-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.ranking-table thead { background: var(--border-color, #f9fafb); }
+
+.ranking-table th {
+  padding: 12px 16px;
+  text-align: left;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted, #6b7280);
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.ranking-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-color, #f3f4f6);
+  vertical-align: middle;
+}
+
+.ranking-table tbody tr:hover { background: var(--border-color, #f9fafb); }
+.ranking-table tbody tr:last-child td { border-bottom: none; }
+
+.rank-badge {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 13px;
+  background: var(--border-color, #e5e7eb);
+  color: var(--text-muted, #6b7280);
+}
+
+.rank-badge.gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: white; }
+.rank-badge.silver { background: linear-gradient(135deg, #d1d5db, #9ca3af); color: white; }
+.rank-badge.bronze { background: linear-gradient(135deg, #fdba74, #f97316); color: white; }
+
+.member-cell { display: flex; flex-direction: column; gap: 2px; }
+.member-name { font-size: 14px; font-weight: 600; color: var(--text-primary, #1a1a1a); line-height: 1.4; }
+.member-tag { font-size: 12px; font-weight: 400; color: var(--text-muted, #6b7280); margin-left: 4px; }
+.member-phone { font-size: 12px; color: var(--text-muted, #9ca3af); }
+
+.credits-amount { font-size: 16px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
+.credits-amount.primary { color: var(--primary, #0ea5e9); }
+.count-value { font-size: 14px; font-weight: 600; color: var(--text-primary, #374151); }
+.type-credits { font-size: 16px; font-weight: 700; color: var(--text-primary, #374151); min-width: 80px; }
+
+.detail-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+  font-family: inherit;
+}
+
+.detail-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3); }
+.detail-btn:active { transform: translateY(0); }
+
+.no-ranking {
+  text-align: center;
+  padding: 24px;
+  color: var(--text-muted, #9ca3af);
+  font-size: 14px;
+}
+
+/* Empty */
+.empty-stats {
+  text-align: center;
+  padding: 40px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.empty-stats p { font-size: 14px; color: var(--text-muted, #9ca3af); margin: 0; }
+
+/* Group stats */
+.group-stats-section { display: flex; flex-direction: column; gap: 24px; }
+
+.group-ranking-chart {
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid var(--border-color, #e5e7eb);
+}
+
+.group-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
+.group-chart-summary { font-size: 13px; color: var(--text-muted, #9ca3af); font-weight: 500; }
+.group-bars-container { display: flex; flex-direction: column; gap: 10px; }
+
+.group-bar-row { display: flex; align-items: center; gap: 10px; min-height: 32px; }
+
+.group-bar-rank {
+  width: 28px; height: 28px;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 8px; font-size: 13px; font-weight: 700;
+  background: var(--border-color, #f3f4f6); color: var(--text-muted, #6b7280);
+  flex-shrink: 0;
+}
+
+.group-bar-rank.gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: white; }
+.group-bar-rank.silver { background: linear-gradient(135deg, #d1d5db, #9ca3af); color: white; }
+.group-bar-rank.bronze { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
+
+.group-bar-name {
+  width: 120px; flex-shrink: 0; font-size: 13px; font-weight: 600;
+  color: var(--text-primary, #374151);
+  display: flex; align-items: center; gap: 6px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+.group-bar-track { flex: 1; min-width: 0; height: 24px; background: var(--border-color, #f3f4f6); border-radius: 6px; overflow: hidden; }
+.group-bar-stack { display: flex; height: 100%; border-radius: 6px; overflow: hidden; }
+.group-bar-fill { height: 100%; transition: width 0.6s ease; min-width: 0; }
+.group-bar-fill.chatbot { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
+.group-bar-fill.codex { background: linear-gradient(135deg, #06b6d4, #0891b2); }
+.group-bar-fill.claudecode { background: linear-gradient(135deg, #f97316, #ea580c); }
+.group-bar-fill.gemini { background: linear-gradient(135deg, #10b981, #059669); }
+.group-bar-fill.openclaw { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
+
+.group-bar-value {
+  width: 72px; flex-shrink: 0; text-align: right;
+  font-size: 13px; font-weight: 700; color: var(--text-primary, #374151);
+  font-variant-numeric: tabular-nums;
+}
+
+.group-detail-table { border-radius: 12px; padding: 20px; border: 1px solid var(--border-color, #e5e7eb); }
+
+/* Group trend */
+.group-trend-section { border-radius: 12px; padding: 20px; border: 1px solid var(--border-color, #e5e7eb); }
+.group-trend-chart { width: 100%; }
+
+.group-trend-bars {
+  display: flex; align-items: flex-end; gap: 4px;
+  height: 200px; padding-bottom: 28px; position: relative; overflow-x: auto;
+}
+
+.group-trend-col {
+  flex: 1; min-width: 32px; display: flex; flex-direction: column;
+  align-items: center; height: 100%; position: relative;
+}
+
+.group-trend-bar-stack {
+  width: 100%; display: flex; flex-direction: column-reverse;
+  align-items: stretch; flex: 1; gap: 2px; justify-content: flex-start;
+}
+
+.group-trend-bar {
+  width: 100%; border-radius: 3px; transition: height 0.6s ease;
+  min-height: 0; cursor: pointer;
+}
+
+.group-trend-bar:hover { opacity: 0.8; }
+
+.group-trend-col .trend-bar-label {
+  position: absolute; bottom: 0; font-size: 11px; color: var(--text-muted, #9ca3af); white-space: nowrap;
+}
+
+/* Group colors */
+.group-color-1, .group-color-1 .legend-dot { background: #0ea5e9; }
+.group-color-2, .group-color-2 .legend-dot { background: #06b6d4; }
+.group-color-3, .group-color-3 .legend-dot { background: #f97316; }
+.group-color-4, .group-color-4 .legend-dot { background: #10b981; }
+.group-color-5, .group-color-5 .legend-dot { background: #8b5cf6; }
+.group-color-6, .group-color-6 .legend-dot { background: #ec4899; }
+
+.hourly-legend-item.group-color-1 .legend-dot { background: #0ea5e9; }
+.hourly-legend-item.group-color-2 .legend-dot { background: #06b6d4; }
+.hourly-legend-item.group-color-3 .legend-dot { background: #f97316; }
+.hourly-legend-item.group-color-4 .legend-dot { background: #10b981; }
+.hourly-legend-item.group-color-5 .legend-dot { background: #8b5cf6; }
+.hourly-legend-item.group-color-6 .legend-dot { background: #ec4899; }
+
+/* Export progress */
+.export-progress-overlay {
+  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 10000; animation: fadeIn 0.2s ease-out;
+}
+
+.export-progress-dialog {
+  background: var(--bg-primary, white); border-radius: 20px; padding: 40px;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+  min-width: 400px; max-width: 500px;
+  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes scaleIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+
+.progress-content { display: flex; flex-direction: column; align-items: center; gap: 20px; }
+
+.cute-loader { position: relative; width: 100px; height: 100px; }
+.loader-circle { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); animation: bounce 1s ease-in-out infinite; }
+@keyframes bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.05); } }
+
+.loader-face { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; }
+.loader-eyes { display: flex; justify-content: space-around; margin-top: 20px; gap: 20px; }
+.eye { width: 12px; height: 12px; background: white; border-radius: 50%; position: relative; animation: blink 3s infinite; }
+.eye::after { content: ''; position: absolute; width: 6px; height: 6px; background: #333; border-radius: 50%; top: 3px; left: 3px; animation: eyeMove 2s ease-in-out infinite; }
+@keyframes blink { 0%, 48%, 52%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.1); } }
+@keyframes eyeMove { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(2px); } 75% { transform: translateX(-2px); } }
+
+.loader-mouth { width: 30px; height: 15px; border: 3px solid white; border-top: none; border-radius: 0 0 30px 30px; margin: 8px auto 0; animation: smile 1s ease-in-out infinite; }
+@keyframes smile { 0%, 100% { width: 30px; } 50% { width: 35px; } }
+
+.progress-title {
+  font-size: 20px; font-weight: 700; margin: 0;
+  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+}
+
+.progress-info { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
+.current-member { font-size: 15px; font-weight: 600; color: var(--primary, #0ea5e9); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.progress-text { font-size: 13px; color: var(--text-muted, #6b7280); font-weight: 500; }
+
+.progress-bar-container { width: 100%; position: relative; }
+.progress-bar-bg { width: 100%; height: 30px; background: var(--border-color, #f3f4f6); border-radius: 15px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); position: relative; }
+.progress-bar-fill { height: 100%; background: linear-gradient(90deg, #0ea5e9 0%, #0284c7 50%, #0ea5e9 100%); background-size: 200% 100%; border-radius: 15px; transition: width 0.3s ease; position: relative; overflow: hidden; animation: gradientShift 2s linear infinite; }
+@keyframes gradientShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
+.progress-bar-shine { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shine 1.5s infinite; }
+@keyframes shine { 0% { left: -100%; } 100% { left: 100%; } }
+.progress-percentage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 13px; font-weight: 700; color: var(--text-primary, #1a1a1a); z-index: 1; }
+.progress-tip { font-size: 13px; color: var(--text-muted, #9ca3af); text-align: center; animation: pulse 2s ease-in-out infinite; }
+@keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
+
+/* Responsive */
+@media (max-width: 1024px) {
+  .stats-summary-row { flex-wrap: wrap; }
+}
+
+@media (max-width: 640px) {
+  .ranking-table-container { overflow-x: auto; }
+  .ranking-table { min-width: 900px; }
+  .summary-card { padding: 8px 12px; }
+  .summary-value { font-size: 18px; }
+  .echarts-line-container { height: 200px; }
+  .token-usage-grid { grid-template-columns: 1fr; }
+}