.echart-v2-edit-toggle {
        background: none;
        background: #f0f0f0;
        border-radius: 0.25em;
        padding: var(--sp-xs) var(--sp-s);
        cursor: pointer;
        color: #666;
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: var(--text-size-95);
        transition: background 0.2s, color 0.2s;
    }
    .echart-v2-edit-toggle:hover {
        background: #e1e1e1;
        color: #333;
    }
    .echart-v2-edit-toggle.active {
        background: #e8f0fec7;
        border-color: #4279bc59;
        color: #4279BC;
    }
    .echart-v2-edit-toggle.active:hover {
        background: #dde8fc;
        border-color: #4279bc8a;
        color: #4279BC;
    }
    .echart-v2-edit-actions {
        display: none;
        gap: 6px;
        margin-bottom: 8px;
    }
    .echart-v2-wrapper.echart-edit-mode .echart-v2-edit-actions {
        display: flex;
    }
    .echart-v2-edit-btn {
        background: #f5f5f5;        
        border-radius: 0.25em;
        padding: var(--sp-xs) var(--sp-s);
        cursor: pointer;
        font-size: var(--text-size-90);
        color: #555;
        transition: background 0.2s;
    }
    .echart-v2-edit-btn:hover {
        background: #e0e0e0;
    }
    .echart-v2-edit-btn.echart-v2-btn-remove {
        color: #c62828;
        border-color: #e0b0b0;
    }
    .echart-v2-edit-btn.echart-v2-btn-remove:hover {
        background: #fbe9e7;
    }
    .echart-v2-add-chart-btn {
        display: none;
        background: #e8f0fec7;
        border-color: #4279bc59;
        border-radius: 0.25em;
        padding: var(--sp-xs) var(--sp-s);
        cursor: pointer;
        font-size: var(--text-size-95);
        color: #4279BC;
        margin-top: var(--sp-s);
        transition: background 0.2s;
        text-decoration: none;
    }
    .echart-v2-wrapper.echart-edit-mode .echart-v2-add-chart-btn {
        display: inline-block;
    }
    .echart-v2-add-chart-btn:hover {
        background: #d4e0f6c7;
        color: #4279BC;
    }


        .echart-v2-add-chart-btn-none {
        display: block;
        width:fit-content;
        background: #e8f0fec7;
        border-color: #4279bc59;
        border-radius: 0.25em;
        padding: var(--sp-xs) var(--sp-s);
        cursor: pointer;
        font-size: var(--text-size-95);
        color: #4279BC;
        margin-bottom: var(--sp-s);
        transition: background 0.2s;
        text-decoration: none;
    }
    .echart-v2-wrapper.echart-edit-mode .echart-v2-add-chart-btn-none {
        display: inline-block;
    }
    .echart-v2-add-chart-btn-none:hover {
        background: #d4e0f6c7;
        color: #4279BC;
    }

    .echart-v2-restore-hidden-btn {
        display: none;
        background: #fff3e0;        
        border-radius: 0.25em;
        padding: var(--sp-xs) var(--sp-s);       
        cursor: pointer;
        font-size: var(--text-size-95);
        color: #e65100;
        margin-bottom: var(--sp-s);
        transition: background 0.2s;
    }
    .echart-v2-wrapper.echart-edit-mode .echart-v2-restore-hidden-btn {
        display: inline-block;
    }
    .echart-v2-restore-hidden-btn:hover {
        background: #ffe0b2;
    }
    .echart-v2-restore-hidden-btn-always {
        display: inline-block;
    }
    .echart-v2-reset-charts-btn {
        display: none;
        background: #fce4ec;
        border-radius: 0.25em;
        padding: var(--sp-xs) var(--sp-s);
        cursor: pointer;
        font-size: var(--text-size-95);
        color: #c62828;
        margin-bottom: var(--sp-s);
        transition: background 0.2s;
    }
    .echart-v2-wrapper.echart-edit-mode .echart-v2-reset-charts-btn {
        display: inline-block;
    }
    .echart-v2-reset-charts-btn:hover {
        background: #f8bbd0;
    }
    .echart-v2-reset-charts-btn-always {
        display: inline-block;
    }
    .echart-v2-restore-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.4);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .echart-v2-restore-dialog {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        min-width: 350px;
        max-width: 500px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    }
    .echart-v2-restore-dialog h5 {
        margin: 0 0 12px 0;
    }
    .echart-v2-restore-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
    }
    .echart-v2-restore-item:last-child {
        border-bottom: none;
    }
    .echart-v2-btn-restore {
        background: #e8f5e9;
        border-color: #a5d6a7;
        color: #2e7d32;
    }
    .echart-v2-btn-restore:hover {
        background: #c8e6c9;
    }
    .echart-v2-restore-close {
        margin-top: 12px;
        background: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 6px 16px;
        cursor: pointer;
        font-size: 13px;
    }

    /* Unavailable charts: hidden by default, shown as ghost cards in edit mode */
    .echart-v2-chart-unavailable {
        display: none;
    }
    .echart-v2-wrapper.echart-edit-mode .echart-v2-chart-unavailable {
        display: block;
    }
    .echart-v2-chart-unavailable .chart-canvas-container {
        display: none;
    }
    .echart-v2-extra-info-unavailable {
        display: none;
    }
    .echart-v2-wrapper.echart-edit-mode .echart-v2-extra-info-unavailable {
        display: block;
    }

    /* Ghost placeholder body */
    .echart-v2-ghost-placeholder {
        display: none;
    }
    .echart-v2-chart-unavailable .echart-v2-ghost-placeholder {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        background: #f8f9fa;
        border: 2px dashed #ced4da;
        border-radius: 6px;
        margin-bottom: 4px;
    }
    .echart-v2-ghost-icon {
        flex-shrink: 0;
        color: #adb5bd;
    }
    .echart-v2-ghost-info {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .echart-v2-ghost-type {
        font-size: var(--text-size-95);
        color: #495057;
    }
    .echart-v2-ghost-scale,
    .echart-v2-ghost-norm {
        font-size: var(--text-size-90);
        color: #6c757d;
    }
    .echart-v2-ghost-status {
        font-size: var(--text-size-90);
        color: #adb5bd;
        font-style: italic;
    }