.nav-chart-wrapper {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
            background: #F2F2F7;
            color: #1C1C1E;
            -webkit-font-smoothing: antialiased;
        }
        .nav-chart-wrapper .chart-wrap { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .ios-card {
            background: rgba(255, 255, 255, 0.72);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-radius: 20px;
            border: 0.5px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
            overflow: hidden;
        }
        .nav-chart-wrapper .chart-header { padding: 24px; margin-bottom: 16px; }
        .nav-chart-wrapper .chart-header h1 {
            font-size: 28px;
            font-weight: 700;
            letter-spacing: -0.5px;
            margin-bottom: 20px;
            color: #1C1C1E;
        }
        .segmented-control {
            display: inline-flex;
            background: #E5E5EA;
            border-radius: 8px;
            padding: 2px;
            gap: 2px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .segmented-control .time-btn {
            padding: 7px 14px;
            border: none;
            background: transparent;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            color: #1C1C1E;
            position: relative;
            outline: none;
        }
        .segmented-control .time-btn.active {
            background: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
            color: #1C1C1E;
        }
        .custom-range {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .custom-range span {
            font-size: 14px;
            color: #8E8E93;
            font-weight: 400;
        }
        .custom-range input[type="date"] {
            padding: 8px 12px;
            border: 0.5px solid #E5E5EA;
            border-radius: 10px;
            font-size: 14px;
            color: #1C1C1E;
            background: rgba(255, 255, 255, 0.6);
            font-family: inherit;
            outline: none;
            transition: border-color 0.2s;
        }
        .custom-range input[type="date"]:focus { border-color: #007AFF; }
        .ios-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            font-family: inherit;
            transition: all 0.2s;
            outline: none;
        }
        .ios-btn:active { transform: scale(0.96); }
        .ios-btn-primary {
            background: #007AFF;
            color: #fff;
        }
        .ios-btn-primary:hover { background: #0051D5; }
        .ios-btn-secondary {
            background: #E5E5EA;
            color: #1C1C1E;
        }
        .ios-btn-secondary:hover { background: #D1D1D6; }
        .ios-btn-secondary.active {
            background: #34C759;
            color: #fff;
        }
        .chart-container { padding: 16px; margin-bottom: 16px; }
        #chart { width: 100%; height: 500px; }
        .stats-panel {
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        .stat-item {
            text-align: center;
            padding: 20px 12px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 16px;
            transition: transform 0.2s;
        }
        .stat-label {
            font-size: 12px;
            font-weight: 500;
            color: #8E8E93;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .stat-value {
            font-size: 26px;
            font-weight: 700;
            color: #1C1C1E;
            letter-spacing: -0.5px;
        }
        .stat-value.positive { color: #34C759; }
        .stat-value.negative { color: #FF3B30; }
        .legend-info {
            padding: 16px;
            margin-top: 16px;
            font-size: 13px;
            color: #8E8E93;
            text-align: center;
            font-weight: 400;
        }
        @media (max-width: 768px) {
            .nav-chart-wrapper .chart-wrap { padding: 12px; }
            .nav-chart-wrapper .chart-header { padding: 20px; }
            .nav-chart-wrapper .chart-header h1 { font-size: 24px; }
            .segmented-control .time-btn { padding: 6px 10px; font-size: 12px; }
            #chart { height: 400px; }
            .stats-panel { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 16px; }
            .stat-value { font-size: 22px; }
            .custom-range { gap: 8px; }
            .custom-range input[type="date"] { padding: 6px 8px; font-size: 13px; }
        }