codexmate 0.0.34 → 0.0.37

package/web-ui/styles/sessions-usage.css

@@ -1,5 +1,5 @@
 /* ============================================
-   Usage Tab — Refined Design System
+   Usage Tab — 流光设计 (Flow of Light)
    ============================================ */
 
 /* ---- Toolbar ---- */
@@ -7,554 +7,710 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 12px;
+    gap: 16px;
     flex-wrap: wrap;
-    margin-bottom: 18px;
+    margin-bottom: 28px;
 }
 
 .usage-toolbar-title {
-    font-size: var(--font-size-title);
-    font-weight: var(--font-weight-title);
+    font-size: 20px;
+    font-weight: 600;
     color: var(--color-text-primary);
-    letter-spacing: -0.01em;
+    letter-spacing: -0.03em;
 }
 
 .usage-range-group {
     display: flex;
-    gap: 4px;
+    gap: 2px;
     padding: 3px;
-    border-radius: var(--radius-md);
-    background: var(--color-surface-alt);
-    border: 1px solid var(--color-border-soft);
+    border-radius: 12px;
+    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(247,239,232,0.7));
+    border: 1px solid rgba(137, 111, 94, 0.08);
+    box-shadow: 0 2px 12px rgba(92, 68, 52, 0.06);
+    backdrop-filter: blur(8px);
 }
 
 .usage-range-btn {
     border: none;
     background: transparent;
     color: var(--color-text-tertiary);
-    padding: 5px 11px;
-    border-radius: var(--radius-sm);
+    padding: 8px 16px;
+    border-radius: 9px;
     cursor: pointer;
-    font-size: 12px;
-    font-weight: 600;
+    font-size: 13px;
+    font-weight: 500;
     font-family: var(--font-family);
     white-space: nowrap;
-    transition: all 120ms var(--ease-spring);
+    transition: all 180ms var(--ease-spring);
     outline: none;
     -webkit-tap-highlight-color: transparent;
 }
 
 .usage-range-btn:hover:not(:disabled) {
     color: var(--color-text-secondary);
-    background: var(--color-surface);
+    background: rgba(200, 121, 99, 0.08);
 }
 
 .usage-range-btn:active:not(:disabled) {
-    transform: scale(0.97);
+    transform: scale(0.95);
 }
 
 .usage-range-btn.active {
     color: #fff;
-    background: var(--color-brand);
-    box-shadow: 0 1px 3px rgba(200, 121, 99, 0.35);
+    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
+    box-shadow: 0 4px 16px rgba(200, 121, 99, 0.35), 0 0 0 1px rgba(255,255,255,0.1) inset;
 }
 
 .usage-range-btn:disabled {
-    opacity: 0.4;
+    opacity: 0.35;
     cursor: not-allowed;
 }
 
 .usage-range-btn-icon {
-    padding: 5px 8px;
+    padding: 8px 12px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }
 
 .usage-range-btn-icon svg {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
+}
+
+.usage-range-btn-icon:active {
+    transform: rotate(180deg);
+    transition: transform 400ms var(--ease-spring);
+}
+
+/* ---- Empty State (插画风格) ---- */
+.usage-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 64px 20px;
+    text-align: center;
+}
+
+.usage-empty-illustration {
+    width: 72px;
+    height: 72px;
+    color: var(--color-text-muted);
+    opacity: 0.5;
+    margin-bottom: 20px;
+    animation: usage-empty-breathe 4s ease-in-out infinite;
 }
 
-/* ---- Current session bar ---- */
-.usage-current-session-bar {
+@keyframes usage-empty-breathe {
+    0%, 100% { transform: scale(1) translateY(0); opacity: 0.5; }
+    50% { transform: scale(1.08) translateY(-4px); opacity: 0.7; }
+}
+
+.usage-empty-text {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    max-width: 300px;
+    line-height: 1.6;
+}
+
+/* ---- Hero 区域 (全宽沉浸式) ---- */
+.usage-hero {
+    padding: 32px 28px;
+    margin-bottom: 24px;
+    border-radius: 18px;
+    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(252,248,241,0.9));
+    border: 1px solid rgba(137, 111, 94, 0.08);
+    min-height: 160px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 20px;
+    box-shadow: 0 8px 32px rgba(92, 68, 52, 0.08), 0 0 0 1px rgba(255,255,255,0.5) inset;
+    backdrop-filter: blur(10px);
+    position: relative;
+    overflow: hidden;
+}
+
+.usage-hero::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -20%;
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, rgba(200, 121, 99, 0.06) 0%, transparent 70%);
+    pointer-events: none;
+}
+
+.usage-hero-active {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 10px;
-    padding: 8px 14px;
-    margin-bottom: 16px;
-    border-radius: var(--radius-md);
-    background: var(--color-surface-alt);
+    gap: 10px 16px;
+    padding: 12px 18px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, rgba(200, 121, 99, 0.08), rgba(200, 121, 99, 0.04));
+    border: 1px solid rgba(200, 121, 99, 0.12);
     font-size: 12px;
-    color: var(--color-text-secondary);
+    position: relative;
+    z-index: 1;
 }
 
-.usage-current-session-dot {
+.usage-hero-active-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--color-success);
     flex-shrink: 0;
-    animation: usage-pulse 2s ease-in-out infinite;
+    animation: usage-pulse 2.2s ease-in-out infinite;
+    box-shadow: 0 0 12px rgba(75, 139, 106, 0.4);
 }
 
 @keyframes usage-pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.4; }
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(0.85); }
 }
 
-.usage-current-session-label {
-    font-weight: 700;
+.usage-hero-active-label {
+    font-weight: 600;
     color: var(--color-text-primary);
 }
 
-.usage-current-session-stat {
+.usage-hero-active-stat {
     color: var(--color-text-tertiary);
 }
 
-.usage-current-session-stat::before {
+.usage-hero-active-stat::before {
     content: '·';
-    margin-right: 10px;
+    margin-right: 12px;
     color: var(--color-border-strong);
 }
 
-/* ---- Summary cards ---- */
-.usage-summary-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
-    gap: 10px;
-    margin-bottom: 18px;
-}
-
-.usage-summary-card {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 2px;
-    padding: 14px 16px;
-    border-radius: var(--radius-md);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border-soft);
-    transition: all 120ms var(--ease-spring);
-    min-height: 72px;
+.usage-hero-metrics {
+    text-align: center;
+    position: relative;
+    z-index: 1;
 }
 
-.usage-summary-card-value {
-    font-size: 26px;
+.usage-hero-main {
+    font-size: 52px;
     font-weight: 700;
     color: var(--color-text-primary);
-    line-height: 1.1;
-    letter-spacing: -0.02em;
+    line-height: 1;
+    letter-spacing: -0.04em;
     font-variant-numeric: tabular-nums;
+    animation: usage-hero-count 1s var(--ease-out-expo);
+    background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-brand) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
-.usage-summary-card-label {
-    font-size: 11px;
-    font-weight: 500;
+@keyframes usage-hero-count {
+    from { opacity: 0; transform: translateY(16px) scale(0.95); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.usage-hero-sub {
+    margin-top: 10px;
+    font-size: 14px;
     color: var(--color-text-tertiary);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 14px;
+    flex-wrap: wrap;
 }
 
-.usage-copyable {
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
+.usage-hero-delta {
+    font-size: 12px;
+    font-weight: 600;
+    padding: 3px 10px;
+    border-radius: 16px;
 }
 
-.usage-copyable:hover {
-    border-color: var(--color-brand);
-    background: var(--color-surface-alt);
+.usage-hero-delta.delta-up {
+    color: var(--color-success);
+    background: linear-gradient(135deg, rgba(75, 139, 106, 0.15), rgba(75, 139, 106, 0.08));
 }
 
-.usage-copyable:active {
-    transform: scale(0.98);
+.usage-hero-delta.delta-down {
+    color: var(--color-error);
+    background: linear-gradient(135deg, rgba(196, 69, 54, 0.15), rgba(196, 69, 54, 0.08));
 }
 
-.usage-copyable:focus-visible {
-    outline: 2px solid var(--color-brand-light);
-    outline-offset: 2px;
+/* ---- 波浪图 (流体动画) ---- */
+.usage-wave-section {
+    overflow: hidden;
+    border: none;
+    background: transparent;
+    padding: 0;
+    margin-bottom: 24px;
 }
 
-/* ---- Content area ---- */
-.usage-content {
+.usage-wave-container {
+    margin-top: 16px;
     position: relative;
+    padding: 20px;
+    border-radius: 18px;
+    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(252,248,241,0.6));
+    border: 1px solid rgba(137, 111, 94, 0.06);
+    box-shadow: 0 4px 20px rgba(92, 68, 52, 0.05);
+    backdrop-filter: blur(8px);
 }
 
-.usage-content-loading {
-    opacity: 0.7;
-    pointer-events: none;
+.usage-wave-chart {
+    width: 100%;
+    height: 150px;
+    display: block;
 }
 
-.usage-content-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-end;
-    padding: 12px;
-    z-index: 1;
+.usage-wave-area {
+    transition: d 600ms var(--ease-spring);
+    animation: usage-wave-pulse 4s ease-in-out infinite;
 }
 
-.usage-spinner {
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    border: 2px solid var(--color-border-soft);
-    border-top-color: var(--color-brand);
-    animation: usage-spin 0.8s linear infinite;
+@keyframes usage-wave-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.85; }
 }
 
-@keyframes usage-spin {
-    to { transform: rotate(360deg); }
+.usage-wave-line {
+    transition: d 600ms var(--ease-spring);
+    filter: drop-shadow(0 4px 12px rgba(200, 121, 99, 0.25));
 }
 
-/* ---- Cards ---- */
-.usage-card {
-    padding: 18px;
-    border-radius: var(--radius-md);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border-soft);
-    margin-bottom: 12px;
+.usage-wave-hover-line {
+    transition: x1 200ms var(--ease-spring), x2 200ms var(--ease-spring),
+                 y1 200ms var(--ease-spring), y2 200ms var(--ease-spring);
+    stroke-dasharray: 4 4;
+    animation: usage-hover-dash 20s linear infinite;
 }
 
-.usage-card-head {
-    margin-bottom: 14px;
+@keyframes usage-hover-dash {
+    to { stroke-dashoffset: -100; }
 }
 
-.usage-card-title {
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--color-text-primary);
-    margin-bottom: 2px;
+.usage-wave-hover-point {
+    transition: cx 200ms var(--ease-spring), cy 200ms var(--ease-spring);
+    filter: drop-shadow(0 0 8px rgba(200, 121, 99, 0.4));
+    animation: usage-point-pulse 2s ease-in-out infinite;
 }
 
-.usage-card-subtitle {
+@keyframes usage-point-pulse {
+    0%, 100% { r: 5; }
+    50% { r: 6.5; }
+}
+
+.usage-wave-labels {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 12px;
+    padding: 0 8px;
+}
+
+.usage-wave-label {
     font-size: 11px;
     color: var(--color-text-muted);
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 6px;
+    transition: all 180ms var(--ease-spring);
+    -webkit-tap-highlight-color: transparent;
+    font-weight: 500;
 }
 
-/* ---- Chart grid ---- */
-.usage-chart-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 12px;
+.usage-wave-label:hover {
+    color: var(--color-text-secondary);
+    background: rgba(200, 121, 99, 0.08);
 }
 
-.usage-card-wide {
-    grid-column: 1 / -1;
+.usage-wave-label.active {
+    color: var(--color-brand);
+    font-weight: 600;
+    background: linear-gradient(135deg, rgba(200, 121, 99, 0.12), rgba(200, 121, 99, 0.06));
 }
 
-/* ---- Daily chart ---- */
-.usage-daily-chart {
-    display: flex;
-    align-items: flex-end;
-    gap: 4px;
-    height: 140px;
-    padding: 0 2px;
+/* ---- 日期详情 ---- */
+.usage-daydetail {
+    margin-top: 16px;
+    padding: 14px 18px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, rgba(247, 239, 232, 0.8), rgba(247, 239, 232, 0.4));
+    border: 1px solid rgba(137, 111, 94, 0.06);
 }
 
-.usage-daily-bar-group {
-    flex: 1;
+.usage-daydetail-header {
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
     align-items: center;
-    gap: 6px;
-    cursor: pointer;
-    min-width: 0;
-    -webkit-tap-highlight-color: transparent;
+    flex-wrap: wrap;
+    gap: 8px;
 }
 
-.usage-daily-bar-stack {
-    width: 100%;
-    max-width: 32px;
-    height: 100px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    position: relative;
-    border-radius: 4px 4px 0 0;
-    overflow: hidden;
-    background: var(--color-surface-alt);
+.usage-daydetail-date {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--color-text-primary);
 }
 
-.usage-daily-bar-fill {
-    width: 100%;
-    border-radius: 4px 4px 0 0;
-    background: var(--color-brand);
-    transition: height 200ms var(--ease-spring);
-    min-height: 2px;
+.usage-daydetail-stats {
+    font-size: 12px;
+    color: var(--color-text-secondary);
 }
 
-.usage-daily-bar-prev {
-    width: 100%;
-    background: var(--color-text-muted);
-    opacity: 0.35;
-    border-radius: 4px 4px 0 0;
+.usage-daydetail-compare {
+    margin-top: 6px;
+    font-size: 11px;
+    color: var(--color-text-muted);
 }
 
-.usage-daily-bar-group.active .usage-daily-bar-fill {
-    background: var(--color-brand-dark);
-    box-shadow: 0 0 8px rgba(200, 121, 99, 0.3);
+/* ---- 热力图 (动态呼吸) ---- */
+.usage-card-hourly-heatmap {
+    overflow-x: auto;
+    border: none;
+    background: transparent;
+    padding: 0;
 }
 
-.usage-daily-bar-group:hover .usage-daily-bar-fill {
-    filter: brightness(1.1);
+.hourly-heatmap-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    margin-top: 14px;
+    min-width: 500px;
+    padding: 16px;
+    border-radius: 18px;
+    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(252,248,241,0.6));
+    border: 1px solid rgba(137, 111, 94, 0.06);
+    box-shadow: 0 4px 20px rgba(92, 68, 52, 0.05);
+    backdrop-filter: blur(8px);
 }
 
-.usage-daily-bar-label {
-    font-size: 10px;
-    color: var(--color-text-muted);
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
+.hourly-heatmap-header {
+    display: flex;
+    gap: 3px;
+    align-items: flex-end;
 }
 
-.usage-daily-bar-group.active .usage-daily-bar-label {
-    color: var(--color-brand-dark);
-    font-weight: 700;
+.hourly-heatmap-corner {
+    width: 36px;
+    flex-shrink: 0;
 }
 
-/* ---- Daily legend ---- */
-.usage-daily-legend {
-    display: flex;
-    gap: 16px;
-    margin-top: 10px;
-    font-size: 11px;
+.hourly-heatmap-hour-label {
+    flex: 1;
+    min-width: 0;
+    font-size: 9px;
     color: var(--color-text-muted);
+    text-align: center;
+    line-height: 14px;
 }
 
-.usage-daily-legend-item {
-    display: inline-flex;
+.hourly-heatmap-row {
+    display: flex;
+    gap: 3px;
     align-items: center;
-    gap: 5px;
 }
 
-.usage-daily-legend-swatch {
-    width: 10px;
-    height: 10px;
-    border-radius: 2px;
+.hourly-heatmap-weekday-label {
+    width: 36px;
+    flex-shrink: 0;
+    font-size: 11px;
+    color: var(--color-text-secondary);
+    text-align: right;
+    padding-right: 6px;
+    font-weight: 500;
 }
 
-.usage-daily-legend-swatch.current {
-    background: var(--color-brand);
+.hourly-heatmap-cell {
+    flex: 1;
+    min-width: 0;
+    height: 7px;
+    border-radius: 4px;
+    transition: all 200ms var(--ease-spring);
+    cursor: crosshair;
 }
 
-.usage-daily-legend-swatch.prev {
-    background: var(--color-text-muted);
-    opacity: 0.35;
+.hourly-heatmap-cell:hover {
+    transform: scaleY(1.4);
+    filter: brightness(1.1);
 }
 
-/* ---- Day detail ---- */
-.usage-daydetail {
-    margin-top: 12px;
-    padding: 10px 14px;
-    border-radius: var(--radius-sm);
+.hourly-heatmap-cell.level-0 {
     background: var(--color-surface-alt);
 }
+.hourly-heatmap-cell.level-1 {
+    background: var(--color-heatmap-1);
+    animation: heatmap-breath-1 3s ease-in-out infinite;
+}
+.hourly-heatmap-cell.level-2 {
+    background: var(--color-heatmap-2);
+    animation: heatmap-breath-2 3s ease-in-out infinite;
+}
+.hourly-heatmap-cell.level-3 {
+    background: var(--color-heatmap-3);
+    animation: heatmap-breath-3 3s ease-in-out infinite;
+}
+.hourly-heatmap-cell.level-4 {
+    background: var(--color-heatmap-4);
+    animation: heatmap-breath-4 3s ease-in-out infinite;
+    box-shadow: 0 0 8px rgba(200, 121, 99, 0.3);
+}
 
-.usage-daydetail-header {
+@keyframes heatmap-breath-1 {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.85; }
+}
+@keyframes heatmap-breath-2 {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.9; }
+}
+@keyframes heatmap-breath-3 {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.95; }
+}
+@keyframes heatmap-breath-4 {
+    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(200, 121, 99, 0.3); }
+    50% { opacity: 0.9; box-shadow: 0 0 14px rgba(200, 121, 99, 0.5); }
+}
+
+.hourly-heatmap-legend {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    flex-wrap: wrap;
-    gap: 8px;
+    gap: 4px;
+    justify-content: flex-end;
+    margin-top: 12px;
+    font-size: 10px;
+    color: var(--color-text-muted);
 }
 
-.usage-daydetail-date {
-    font-weight: 700;
-    font-size: 13px;
-    color: var(--color-text-primary);
+.hourly-heatmap-legend .hourly-heatmap-cell {
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
 }
 
-.usage-daydetail-stats {
-    font-size: 12px;
-    color: var(--color-text-secondary);
+.hourly-heatmap-legend-label {
+    margin: 0 4px;
 }
 
-.usage-daydetail-compare {
-    margin-top: 4px;
-    font-size: 11px;
-    color: var(--color-text-muted);
+/* ---- 列表样式 (加大间距) ---- */
+.usage-list-compact {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
 }
 
-/* ---- Lists ---- */
-.usage-list {
+.usage-list-compact-item {
     display: flex;
-    flex-direction: column;
-    gap: 8px;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px 14px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 180ms var(--ease-spring);
+    -webkit-tap-highlight-color: transparent;
 }
 
-.usage-list-row {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: center;
-    gap: 8px 12px;
-    padding: 8px 10px;
-    border-radius: var(--radius-sm);
-    background: var(--color-surface-alt);
-    transition: background 120ms var(--ease-spring);
+.usage-list-compact-item:hover {
+    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(252,248,241,0.7));
+    transform: translateX(4px);
+    box-shadow: 0 2px 8px rgba(92, 68, 52, 0.06);
 }
 
-.usage-list-row:hover {
-    background: var(--color-surface-elevated);
+.usage-list-compact-item:active {
+    transform: translateX(2px) scale(0.98);
 }
 
-.usage-list-title {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--color-text-primary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+.usage-list-bullet {
+    color: var(--color-brand);
+    font-size: 16px;
+    line-height: 1.4;
+    flex-shrink: 0;
+    opacity: 0.7;
 }
 
-.usage-list-path {
-    font-size: 12px;
-    color: var(--color-text-secondary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-family: var(--font-family-mono);
-    font-size: 11px;
+.usage-list-compact-item:hover .usage-list-bullet {
+    opacity: 1;
+}
+
+.usage-list-compact-content {
+    flex: 1;
+    min-width: 0;
 }
 
-.usage-list-stat {
+.usage-list-title {
     font-size: 13px;
-    font-weight: 700;
+    font-weight: 500;
     color: var(--color-text-primary);
-    font-variant-numeric: tabular-nums;
-    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .usage-list-meta {
-    grid-column: 1 / -1;
     font-size: 11px;
     color: var(--color-text-muted);
+    margin-top: 3px;
 }
 
 .usage-list-value {
-    font-size: 12px;
+    font-size: 13px;
     color: var(--color-text-secondary);
-    padding: 8px 0;
+    padding: 10px 0;
 }
 
-.usage-progress {
-    height: 3px;
-    border-radius: 2px;
-    background: var(--color-surface-alt);
-    overflow: hidden;
-}
-
-.usage-progress-fill {
-    height: 100%;
-    border-radius: 2px;
-    background: var(--color-brand);
-    transition: width 300ms var(--ease-spring);
-}
-
-/* ---- Hourly heatmap ---- */
-.usage-card-hourly-heatmap {
-    overflow-x: auto;
+/* ---- Path 列表 ---- */
+.usage-paths-section {
+    grid-column: 1 / -1;
+    border: none;
+    background: transparent;
+    padding: 0;
 }
 
-.hourly-heatmap-wrapper {
+.usage-list-paths {
     display: flex;
     flex-direction: column;
-    gap: 2px;
-    margin-top: 10px;
-    min-width: 480px;
+    gap: 8px;
+    padding: 16px;
+    border-radius: 18px;
+    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(252,248,241,0.6));
+    border: 1px solid rgba(137, 111, 94, 0.06);
+    box-shadow: 0 4px 20px rgba(92, 68, 52, 0.05);
+    backdrop-filter: blur(8px);
 }
 
-.hourly-heatmap-header {
+.usage-list-path-row {
     display: flex;
-    gap: 2px;
-    align-items: flex-end;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    border-radius: 10px;
+    transition: all 180ms var(--ease-spring);
 }
 
-.hourly-heatmap-corner {
-    width: 32px;
+.usage-list-path-row:hover {
+    background: rgba(255, 255, 255, 0.7);
+    transform: translateX(4px);
+}
+
+.usage-list-path-rank {
+    width: 22px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--color-brand);
+    background: linear-gradient(135deg, rgba(200, 121, 99, 0.12), rgba(200, 121, 99, 0.06));
+    border-radius: 6px;
     flex-shrink: 0;
 }
 
-.hourly-heatmap-hour-label {
+.usage-list-path-content {
     flex: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
     min-width: 0;
-    font-size: 9px;
-    color: var(--color-text-muted);
-    text-align: center;
-    line-height: 14px;
 }
 
-.hourly-heatmap-row {
-    display: flex;
-    gap: 2px;
-    align-items: center;
+.usage-list-path {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+    font-family: var(--font-family-mono);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
-.hourly-heatmap-weekday-label {
-    width: 32px;
+.usage-list-path-stat {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    font-variant-numeric: tabular-nums;
     flex-shrink: 0;
-    font-size: 10px;
-    color: var(--color-text-secondary);
-    text-align: right;
-    padding-right: 4px;
 }
 
-.hourly-heatmap-cell {
-    flex: 1;
-    min-width: 0;
-    aspect-ratio: 1;
-    border-radius: 3px;
+/* ---- 卡片 (无边框浮动式) ---- */
+.usage-card {
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+    border: none;
+    margin-bottom: 0;
 }
 
-.hourly-heatmap-cell.level-0 { background: var(--color-surface-alt); }
-.hourly-heatmap-cell.level-1 { background: var(--color-heatmap-1); }
-.hourly-heatmap-cell.level-2 { background: var(--color-heatmap-2); }
-.hourly-heatmap-cell.level-3 { background: var(--color-heatmap-3); }
-.hourly-heatmap-cell.level-4 { background: var(--color-heatmap-4); }
+.usage-card-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    margin-bottom: 0;
+    letter-spacing: -0.02em;
+}
 
-.hourly-heatmap-legend {
-    display: flex;
-    align-items: center;
-    gap: 3px;
-    justify-content: flex-end;
-    margin-top: 8px;
-    font-size: 10px;
-    color: var(--color-text-muted);
+/* ---- 图表网格 (加大间距) ---- */
+.usage-chart-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
 }
 
-.hourly-heatmap-legend .hourly-heatmap-cell {
-    width: 11px;
-    height: 11px;
-    aspect-ratio: auto;
+/* 为非 paths 卡片添加容器 */
+.usage-chart-grid > .usage-card:not(.usage-paths-section):not(.usage-wave-section):not(.usage-card-hourly-heatmap) {
+    padding: 16px;
+    border-radius: 18px;
+    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(252,248,241,0.6));
+    border: 1px solid rgba(137, 111, 94, 0.06);
+    box-shadow: 0 4px 20px rgba(92, 68, 52, 0.05);
+    backdrop-filter: blur(8px);
 }
 
-.hourly-heatmap-legend-label {
-    margin: 0 2px;
+/* ---- 内容区域 ---- */
+.usage-content {
+    position: relative;
 }
 
-/* ---- Empty state ---- */
-.usage-empty {
-    padding: 32px 16px;
-    border-radius: var(--radius-md);
-    background: var(--color-surface-alt);
-    border: 1px dashed var(--color-border);
-    color: var(--color-text-secondary);
-    text-align: center;
-    font-size: 13px;
+.usage-content-loading {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.usage-content-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    padding: 16px;
+    z-index: 10;
+}
+
+.usage-spinner {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: 2px solid rgba(137, 111, 94, 0.15);
+    border-top-color: var(--color-brand);
+    animation: usage-spin 0.8s linear infinite;
+}
+
+@keyframes usage-spin {
+    to { transform: rotate(360deg); }
 }
 
-/* ---- Responsive ---- */
+/* ---- 响应式 ---- */
 @media (max-width: 960px) {
     .usage-chart-grid {
         grid-template-columns: 1fr;
     }
 
-    .usage-summary-grid {
-        grid-template-columns: repeat(2, 1fr);
+    .usage-hero-main {
+        font-size: 44px;
     }
 }
 
@@ -569,20 +725,29 @@
         flex-wrap: wrap;
     }
 
-    .usage-summary-grid {
-        grid-template-columns: repeat(2, 1fr);
+    .usage-hero {
+        padding: 24px 20px;
+        min-height: 140px;
+    }
+
+    .usage-hero-main {
+        font-size: 38px;
     }
 
-    .usage-summary-card-value {
-        font-size: 22px;
+    .usage-wave-chart {
+        height: 110px;
     }
 
-    .usage-daily-chart {
-        height: 100px;
+    .usage-wave-labels {
+        font-size: 10px;
     }
 
-    .usage-daily-bar-stack {
-        max-width: 24px;
-        height: 70px;
+    .hourly-heatmap-wrapper {
+        min-width: 100%;
+        overflow-x: auto;
+    }
+
+    .usage-chart-grid {
+        gap: 16px;
     }
 }