/* Modal Styles */
    .modal-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.8);
        z-index: 10000;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .modal-overlay.open { display: flex; opacity: 1; }
    .modal-box {
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        padding: 30px;
        border-radius: 12px;
        width: 90%;
        max-width: 500px;
        text-align: center;
        position: relative;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .modal-close { position: absolute; top: 15px; right: 15px; background:none; border:none; color:#888; font-size:24px; cursor:pointer; }
    .modal-icon { font-size: 40px; color: var(--blue); margin-bottom: 15px; display: block; }
    .modal-title { margin-bottom: 10px; color: var(--text-main); }
    .modal-body { color: var(--text-muted); line-height: 1.6; }
    .modal-btn { margin-top: 20px; padding: 8px 20px; background: var(--blue); color: white; border: none; border-radius: 6px; cursor: pointer; }

    /* Tab Content Styles (Nav-Tabs Simulation) */
    .tab-content {
        display: none; /* Default hidden */
        animation: fadeIn 0.3s ease;
    }
    .tab-content.active {
        display: block; /* Show only if active */
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* Cursor pointer untuk Tab */
    .tabs .tab {
        cursor: pointer;
    }
    
    
    
/* Modal Styles */
    .modalshare-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.8);
        z-index: 10000;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .modalshare-overlay.open { display: flex; opacity: 1; }
    .modalshare-box {
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        padding: 30px;
        border-radius: 12px;
        width: 90%;
        max-width: 500px;
        text-align: center;
        position: relative;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .modalshare-close { position: absolute; top: 15px; right: 15px; background:none; border:none; color:#888; font-size:24px; cursor:pointer; }
    .modalshare-icon { font-size: 40px; color: var(--blue); margin-bottom: 15px; display: block; }
    .modalshare-title { margin-bottom: 10px; color: var(--text-main); }
    .modalshare-body { color: var(--text-muted); line-height: 1.6; }
    .modalshare-btn { margin-top: 0px; padding: 8px 20px; background: var(--blue); color: white; border: none; border-radius: 6px; cursor: pointer; }

    /* Tab Content Styles (Nav-Tabs Simulation) */
    .tab-content {
        display: none; /* Default hidden */
        animation: fadeIn 0.3s ease;
    }
    .tab-content.active {
        display: block; /* Show only if active */
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* Cursor pointer untuk Tab */
    .tabs .tab {
        cursor: pointer;
    }