codexmate 0.0.41 → 0.0.43

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

@@ -1,849 +1,849 @@
-/* ============================================
-   Usage Tab — 流光设计 (Flow of Light)
-   ============================================ */
-
-/* ---- Toolbar ---- */
-.usage-toolbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 16px;
-    flex-wrap: wrap;
-    margin-bottom: 28px;
-}
-
-.usage-toolbar-title {
-    font-size: 20px;
-    font-weight: 600;
-    color: var(--color-text-primary);
-    letter-spacing: -0.03em;
-}
-
-.usage-range-group {
-    display: flex;
-    gap: 2px;
-    padding: 3px;
-    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: 8px 16px;
-    border-radius: 9px;
-    cursor: pointer;
-    font-size: 13px;
-    font-weight: 500;
-    font-family: var(--font-family);
-    white-space: nowrap;
-    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: rgba(200, 121, 99, 0.08);
-}
-
-.usage-range-btn:active:not(:disabled) {
-    transform: scale(0.95);
-}
-
-.usage-range-btn.active {
-    color: #fff;
-    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.35;
-    cursor: not-allowed;
-}
-
-.usage-range-btn-icon {
-    padding: 8px 12px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.usage-range-btn-icon svg {
-    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;
-}
-
-@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: -72px;
-    right: 0;
-    width: min(320px, 62%);
-    height: min(320px, 62%);
-    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 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;
-    position: relative;
-    z-index: 1;
-}
-
-.usage-hero-active-dot {
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-    background: var(--color-success);
-    flex-shrink: 0;
-    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; transform: scale(1); }
-    50% { opacity: 0.5; transform: scale(0.85); }
-}
-
-.usage-hero-active-label {
-    font-weight: 600;
-    color: var(--color-text-primary);
-    min-width: 0;
-    overflow-wrap: anywhere;
-}
-
-.usage-hero-active-stat {
-    color: var(--color-text-tertiary);
-    min-width: 0;
-    overflow-wrap: anywhere;
-}
-
-.usage-hero-active-stat::before {
-    content: '·';
-    margin-right: 12px;
-    color: var(--color-border-strong);
-}
-
-.usage-hero-metrics {
-    text-align: center;
-    position: relative;
-    z-index: 1;
-}
-
-.usage-hero-main {
-    font-size: 52px;
-    font-weight: 700;
-    color: var(--color-text-primary);
-    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;
-}
-
-@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);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 14px;
-    flex-wrap: wrap;
-    min-width: 0;
-    overflow-wrap: anywhere;
-    text-align: center;
-}
-
-.usage-hero-sub > span {
-    min-width: 0;
-    max-width: 100%;
-    overflow-wrap: anywhere;
-}
-
-.usage-hero-delta {
-    font-size: 12px;
-    font-weight: 600;
-    padding: 3px 10px;
-    border-radius: 16px;
-}
-
-.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-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-wave-section {
-    overflow: hidden;
-    border: none;
-    background: transparent;
-    padding: 0;
-    margin-bottom: 24px;
-}
-
-.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-wave-chart {
-    width: 100%;
-    height: 150px;
-    display: block;
-}
-
-.usage-wave-area {
-    transition: d 600ms var(--ease-spring);
-    animation: usage-wave-pulse 4s ease-in-out infinite;
-}
-
-@keyframes usage-wave-pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.85; }
-}
-
-.usage-wave-line {
-    transition: d 600ms var(--ease-spring);
-    filter: drop-shadow(0 4px 12px rgba(200, 121, 99, 0.25));
-}
-
-.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;
-}
-
-@keyframes usage-hover-dash {
-    to { stroke-dashoffset: -100; }
-}
-
-.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;
-}
-
-@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;
-}
-
-.usage-wave-label:hover {
-    color: var(--color-text-secondary);
-    background: rgba(200, 121, 99, 0.08);
-}
-
-.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));
-}
-
-/* ---- 日期详情 ---- */
-.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-daydetail-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-.usage-daydetail-date {
-    font-weight: 600;
-    font-size: 14px;
-    color: var(--color-text-primary);
-}
-
-.usage-daydetail-stats {
-    font-size: 12px;
-    color: var(--color-text-secondary);
-}
-
-.usage-daydetail-compare {
-    margin-top: 6px;
-    font-size: 11px;
-    color: var(--color-text-muted);
-}
-
-/* ---- 热力图 (动态呼吸) ---- */
-.usage-card-hourly-heatmap {
-    overflow-x: auto;
-    border: none;
-    background: transparent;
-    padding: 0;
-    min-width: 0;
-}
-
-.hourly-heatmap-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-    margin-top: 14px;
-    min-width: 500px;
-    max-width: 100%;
-    box-sizing: border-box;
-    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 {
-    display: flex;
-    gap: 3px;
-    align-items: flex-end;
-}
-
-.hourly-heatmap-corner {
-    width: 36px;
-    flex-shrink: 0;
-}
-
-.hourly-heatmap-hour-label {
-    flex: 1;
-    min-width: 0;
-    font-size: 9px;
-    color: var(--color-text-muted);
-    text-align: center;
-    line-height: 14px;
-}
-
-.hourly-heatmap-row {
-    display: flex;
-    gap: 3px;
-    align-items: center;
-}
-
-.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;
-}
-
-.hourly-heatmap-cell {
-    flex: 1;
-    min-width: 0;
-    height: 7px;
-    border-radius: 4px;
-    transition: all 200ms var(--ease-spring);
-    cursor: crosshair;
-}
-
-.hourly-heatmap-cell:hover {
-    transform: scaleY(1.4);
-    filter: brightness(1.1);
-}
-
-.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);
-}
-
-@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;
-    align-items: center;
-    gap: 4px;
-    justify-content: flex-end;
-    margin-top: 12px;
-    font-size: 10px;
-    color: var(--color-text-muted);
-}
-
-.hourly-heatmap-legend .hourly-heatmap-cell {
-    width: 12px;
-    height: 12px;
-    border-radius: 3px;
-}
-
-.hourly-heatmap-legend-label {
-    margin: 0 4px;
-}
-
-/* ---- 列表样式 (加大间距) ---- */
-.usage-list-compact {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.usage-list-compact-item {
-    display: flex;
-    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-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-compact-item:active {
-    transform: translateX(2px) scale(0.98);
-}
-
-.usage-list-bullet {
-    color: var(--color-brand);
-    font-size: 16px;
-    line-height: 1.4;
-    flex-shrink: 0;
-    opacity: 0.7;
-}
-
-.usage-list-compact-item:hover .usage-list-bullet {
-    opacity: 1;
-}
-
-.usage-list-compact-content {
-    flex: 1;
-    min-width: 0;
-}
-
-.usage-list-title {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--color-text-primary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.usage-list-meta {
-    font-size: 11px;
-    color: var(--color-text-muted);
-    margin-top: 3px;
-}
-
-.usage-list-value {
-    font-size: 13px;
-    color: var(--color-text-secondary);
-    padding: 10px 0;
-}
-
-/* ---- Path 列表 ---- */
-.usage-paths-section {
-    grid-column: 1 / -1;
-    border: none;
-    background: transparent;
-    padding: 0;
-}
-
-.usage-list-paths {
-    display: flex;
-    flex-direction: column;
-    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);
-}
-
-.usage-list-path-row {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 10px 12px;
-    border-radius: 10px;
-    transition: all 180ms var(--ease-spring);
-}
-
-.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;
-}
-
-.usage-list-path-content {
-    flex: 1;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 12px;
-    min-width: 0;
-}
-
-.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;
-}
-
-.usage-list-path-stat {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--color-text-primary);
-    font-variant-numeric: tabular-nums;
-    flex-shrink: 0;
-}
-
-/* ---- 卡片 (无边框浮动式) ---- */
-.usage-card {
-    padding: 0;
-    border-radius: 0;
-    background: transparent;
-    border: none;
-    margin-bottom: 0;
-}
-
-.usage-card-title {
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--color-text-primary);
-    margin-bottom: 0;
-    letter-spacing: -0.02em;
-}
-
-/* ---- 图表网格 (加大间距) ---- */
-.usage-chart-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 20px;
-}
-
-.usage-chart-grid > * {
-    min-width: 0;
-}
-
-/* 为非 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);
-}
-
-/* ---- 内容区域 ---- */
-.usage-content {
-    position: relative;
-}
-
-.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); }
-}
-
-/* ---- 响应式 ---- */
-@media (max-width: 1100px) {
-    .usage-chart-grid {
-        grid-template-columns: 1fr;
-    }
-}
-
-@media (max-width: 960px) {
-
-    .usage-hero-main {
-        font-size: 44px;
-    }
-}
-
-@media (max-width: 640px) {
-    .usage-toolbar {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .usage-range-group {
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .usage-hero {
-        padding: 22px 16px;
-        min-height: 140px;
-        gap: 16px;
-    }
-
-    .usage-hero::before {
-        top: -56px;
-        right: 0;
-        width: 220px;
-        height: 220px;
-    }
-
-    .usage-hero-active {
-        padding: 10px 12px;
-        gap: 8px 10px;
-    }
-
-    .usage-hero-main {
-        font-size: clamp(32px, 10vw, 38px);
-        line-height: 1.08;
-    }
-
-    .usage-wave-chart {
-        height: 110px;
-    }
-
-    .usage-wave-labels {
-        font-size: 10px;
-    }
-
-    .hourly-heatmap-wrapper {
-        width: 100%;
-        min-width: 100%;
-        max-width: 100%;
-        overflow-x: visible;
-        padding: 12px;
-        gap: 2px;
-    }
-
-    .usage-card-hourly-heatmap {
-        overflow-x: visible;
-    }
-
-    .hourly-heatmap-header,
-    .hourly-heatmap-row {
-        gap: 2px;
-    }
-
-    .hourly-heatmap-corner,
-    .hourly-heatmap-weekday-label {
-        width: 28px;
-    }
-
-    .hourly-heatmap-weekday-label {
-        font-size: 10px;
-        padding-right: 4px;
-    }
-
-    .hourly-heatmap-hour-label {
-        font-size: 8px;
-        line-height: 12px;
-    }
-
-    .hourly-heatmap-cell {
-        height: 8px;
-        border-radius: 3px;
-    }
-
-    .usage-chart-grid {
-        gap: 16px;
-    }
-}
-
-@media (max-width: 420px) {
-    .hourly-heatmap-wrapper {
-        padding: 10px;
-        gap: 1px;
-    }
-
-    .hourly-heatmap-header,
-    .hourly-heatmap-row {
-        gap: 1px;
-    }
-
-    .hourly-heatmap-corner,
-    .hourly-heatmap-weekday-label {
-        width: 24px;
-    }
-
-    .hourly-heatmap-weekday-label {
-        font-size: 9px;
-        padding-right: 3px;
-    }
-
-    .hourly-heatmap-hour-label {
-        font-size: 7px;
-    }
-}
+/* ============================================
+   Usage Tab — 流光设计 (Flow of Light)
+   ============================================ */
+
+/* ---- Toolbar ---- */
+.usage-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-bottom: 28px;
+}
+
+.usage-toolbar-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    letter-spacing: -0.03em;
+}
+
+.usage-range-group {
+    display: flex;
+    gap: 2px;
+    padding: 3px;
+    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: 8px 16px;
+    border-radius: 9px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: var(--font-family);
+    white-space: nowrap;
+    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: rgba(200, 121, 99, 0.08);
+}
+
+.usage-range-btn:active:not(:disabled) {
+    transform: scale(0.95);
+}
+
+.usage-range-btn.active {
+    color: #fff;
+    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.35;
+    cursor: not-allowed;
+}
+
+.usage-range-btn-icon {
+    padding: 8px 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.usage-range-btn-icon svg {
+    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;
+}
+
+@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: -72px;
+    right: 0;
+    width: min(320px, 62%);
+    height: min(320px, 62%);
+    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 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;
+    position: relative;
+    z-index: 1;
+}
+
+.usage-hero-active-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--color-success);
+    flex-shrink: 0;
+    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; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(0.85); }
+}
+
+.usage-hero-active-label {
+    font-weight: 600;
+    color: var(--color-text-primary);
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.usage-hero-active-stat {
+    color: var(--color-text-tertiary);
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.usage-hero-active-stat::before {
+    content: '·';
+    margin-right: 12px;
+    color: var(--color-border-strong);
+}
+
+.usage-hero-metrics {
+    text-align: center;
+    position: relative;
+    z-index: 1;
+}
+
+.usage-hero-main {
+    font-size: 52px;
+    font-weight: 700;
+    color: var(--color-text-primary);
+    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;
+}
+
+@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);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 14px;
+    flex-wrap: wrap;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    text-align: center;
+}
+
+.usage-hero-sub > span {
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+}
+
+.usage-hero-delta {
+    font-size: 12px;
+    font-weight: 600;
+    padding: 3px 10px;
+    border-radius: 16px;
+}
+
+.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-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-wave-section {
+    overflow: hidden;
+    border: none;
+    background: transparent;
+    padding: 0;
+    margin-bottom: 24px;
+}
+
+.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-wave-chart {
+    width: 100%;
+    height: 150px;
+    display: block;
+}
+
+.usage-wave-area {
+    transition: d 600ms var(--ease-spring);
+    animation: usage-wave-pulse 4s ease-in-out infinite;
+}
+
+@keyframes usage-wave-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.85; }
+}
+
+.usage-wave-line {
+    transition: d 600ms var(--ease-spring);
+    filter: drop-shadow(0 4px 12px rgba(200, 121, 99, 0.25));
+}
+
+.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;
+}
+
+@keyframes usage-hover-dash {
+    to { stroke-dashoffset: -100; }
+}
+
+.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;
+}
+
+@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;
+}
+
+.usage-wave-label:hover {
+    color: var(--color-text-secondary);
+    background: rgba(200, 121, 99, 0.08);
+}
+
+.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));
+}
+
+/* ---- 日期详情 ---- */
+.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-daydetail-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.usage-daydetail-date {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--color-text-primary);
+}
+
+.usage-daydetail-stats {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+}
+
+.usage-daydetail-compare {
+    margin-top: 6px;
+    font-size: 11px;
+    color: var(--color-text-muted);
+}
+
+/* ---- 热力图 (动态呼吸) ---- */
+.usage-card-hourly-heatmap {
+    overflow-x: auto;
+    border: none;
+    background: transparent;
+    padding: 0;
+    min-width: 0;
+}
+
+.hourly-heatmap-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    margin-top: 14px;
+    min-width: 500px;
+    max-width: 100%;
+    box-sizing: border-box;
+    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 {
+    display: flex;
+    gap: 3px;
+    align-items: flex-end;
+}
+
+.hourly-heatmap-corner {
+    width: 36px;
+    flex-shrink: 0;
+}
+
+.hourly-heatmap-hour-label {
+    flex: 1;
+    min-width: 0;
+    font-size: 9px;
+    color: var(--color-text-muted);
+    text-align: center;
+    line-height: 14px;
+}
+
+.hourly-heatmap-row {
+    display: flex;
+    gap: 3px;
+    align-items: center;
+}
+
+.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;
+}
+
+.hourly-heatmap-cell {
+    flex: 1;
+    min-width: 0;
+    height: 7px;
+    border-radius: 4px;
+    transition: all 200ms var(--ease-spring);
+    cursor: crosshair;
+}
+
+.hourly-heatmap-cell:hover {
+    transform: scaleY(1.4);
+    filter: brightness(1.1);
+}
+
+.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);
+}
+
+@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;
+    align-items: center;
+    gap: 4px;
+    justify-content: flex-end;
+    margin-top: 12px;
+    font-size: 10px;
+    color: var(--color-text-muted);
+}
+
+.hourly-heatmap-legend .hourly-heatmap-cell {
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+}
+
+.hourly-heatmap-legend-label {
+    margin: 0 4px;
+}
+
+/* ---- 列表样式 (加大间距) ---- */
+.usage-list-compact {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.usage-list-compact-item {
+    display: flex;
+    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-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-compact-item:active {
+    transform: translateX(2px) scale(0.98);
+}
+
+.usage-list-bullet {
+    color: var(--color-brand);
+    font-size: 16px;
+    line-height: 1.4;
+    flex-shrink: 0;
+    opacity: 0.7;
+}
+
+.usage-list-compact-item:hover .usage-list-bullet {
+    opacity: 1;
+}
+
+.usage-list-compact-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.usage-list-title {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.usage-list-meta {
+    font-size: 11px;
+    color: var(--color-text-muted);
+    margin-top: 3px;
+}
+
+.usage-list-value {
+    font-size: 13px;
+    color: var(--color-text-secondary);
+    padding: 10px 0;
+}
+
+/* ---- Path 列表 ---- */
+.usage-paths-section {
+    grid-column: 1 / -1;
+    border: none;
+    background: transparent;
+    padding: 0;
+}
+
+.usage-list-paths {
+    display: flex;
+    flex-direction: column;
+    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);
+}
+
+.usage-list-path-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    border-radius: 10px;
+    transition: all 180ms var(--ease-spring);
+}
+
+.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;
+}
+
+.usage-list-path-content {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+}
+
+.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;
+}
+
+.usage-list-path-stat {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    font-variant-numeric: tabular-nums;
+    flex-shrink: 0;
+}
+
+/* ---- 卡片 (无边框浮动式) ---- */
+.usage-card {
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+    border: none;
+    margin-bottom: 0;
+}
+
+.usage-card-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    margin-bottom: 0;
+    letter-spacing: -0.02em;
+}
+
+/* ---- 图表网格 (加大间距) ---- */
+.usage-chart-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 20px;
+}
+
+.usage-chart-grid > * {
+    min-width: 0;
+}
+
+/* 为非 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);
+}
+
+/* ---- 内容区域 ---- */
+.usage-content {
+    position: relative;
+}
+
+.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); }
+}
+
+/* ---- 响应式 ---- */
+@media (max-width: 1100px) {
+    .usage-chart-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 960px) {
+
+    .usage-hero-main {
+        font-size: 44px;
+    }
+}
+
+@media (max-width: 640px) {
+    .usage-toolbar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .usage-range-group {
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .usage-hero {
+        padding: 22px 16px;
+        min-height: 140px;
+        gap: 16px;
+    }
+
+    .usage-hero::before {
+        top: -56px;
+        right: 0;
+        width: 220px;
+        height: 220px;
+    }
+
+    .usage-hero-active {
+        padding: 10px 12px;
+        gap: 8px 10px;
+    }
+
+    .usage-hero-main {
+        font-size: clamp(32px, 10vw, 38px);
+        line-height: 1.08;
+    }
+
+    .usage-wave-chart {
+        height: 110px;
+    }
+
+    .usage-wave-labels {
+        font-size: 10px;
+    }
+
+    .hourly-heatmap-wrapper {
+        width: 100%;
+        min-width: 100%;
+        max-width: 100%;
+        overflow-x: visible;
+        padding: 12px;
+        gap: 2px;
+    }
+
+    .usage-card-hourly-heatmap {
+        overflow-x: visible;
+    }
+
+    .hourly-heatmap-header,
+    .hourly-heatmap-row {
+        gap: 2px;
+    }
+
+    .hourly-heatmap-corner,
+    .hourly-heatmap-weekday-label {
+        width: 28px;
+    }
+
+    .hourly-heatmap-weekday-label {
+        font-size: 10px;
+        padding-right: 4px;
+    }
+
+    .hourly-heatmap-hour-label {
+        font-size: 8px;
+        line-height: 12px;
+    }
+
+    .hourly-heatmap-cell {
+        height: 8px;
+        border-radius: 3px;
+    }
+
+    .usage-chart-grid {
+        gap: 16px;
+    }
+}
+
+@media (max-width: 420px) {
+    .hourly-heatmap-wrapper {
+        padding: 10px;
+        gap: 1px;
+    }
+
+    .hourly-heatmap-header,
+    .hourly-heatmap-row {
+        gap: 1px;
+    }
+
+    .hourly-heatmap-corner,
+    .hourly-heatmap-weekday-label {
+        width: 24px;
+    }
+
+    .hourly-heatmap-weekday-label {
+        font-size: 9px;
+        padding-right: 3px;
+    }
+
+    .hourly-heatmap-hour-label {
+        font-size: 7px;
+    }
+}