```css
/* =========================================================
   DIP PUBLIC MODULE
========================================================= */

/* =========================================================
   GLOBAL
========================================================= */

.dip-hover-card{
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.dip-hover-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 1rem 2.5rem rgba(0,0,0,.08) !important;
}

.dip-icon-box{
    transition:
        transform .25s ease,
        background-color .25s ease;
}

.dip-hover-card:hover .dip-icon-box{
    transform:scale(1.08);
}

.dip-btn-hover{
    transition:
        transform .2s ease,
        background-color .2s ease;
}

.dip-btn-hover:hover{
    transform:translateY(-1px);
}

/* =========================================================
   DIP TABS
========================================================= */

.dip-tabs-wrapper{
    overflow:hidden;
}

.dip-tabs-scroll{
    display:flex;
    gap:12px;

    overflow-x:auto;

    padding-bottom:4px;

    scrollbar-width:none;
    -ms-overflow-style:none;
}

.dip-tabs-scroll::-webkit-scrollbar{
    display:none;
}

.dip-tab{
    min-width:140px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:6px;

    padding:14px 18px;

    border-radius:22px;

    background:#fff;

    border:1px solid #eef1f5;

    text-decoration:none;

    color:#6b7280;

    font-weight:600;

    transition:all .25s ease;

    box-shadow:0 4px 12px rgba(0,0,0,.04);
}

.dip-tab:hover{
    transform:translateY(-2px);
}

.dip-tab.active{
    background:linear-gradient(135deg,#1677ff,#4096ff);

    color:#fff;

    border-color:transparent;

    box-shadow:0 10px 24px rgba(22,119,255,.35);
}

/* =========================================================
   INDEX PAGE
========================================================= */

.dip-index .dip-card-title{
    line-height:1.45;
}

.dip-index .dip-card-description{
    line-height:1.7;
    min-height:48px;
}

.dip-index .badge{
    font-size:.72rem;
    font-weight:600;
}

/* =========================================================
   GROUP PAGE
========================================================= */

.dip-group .dip-group-card{
    position:relative;
    border-radius:24px;
}

.dip-group .dip-top-accent{
    height:4px;
    width:100%;
}

.dip-group .dip-item-title{
    line-height:1.5;
    min-height:48px;
}

.dip-group .dip-highlight{
    background:#ffe066;
    padding:0 4px;
    border-radius:4px;
}

/* =========================================================
   ITEM PAGE
========================================================= */

.dip-item .dip-item-container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

.dip-item .dip-content-text{
    line-height:1.9;
    font-size:16px;
}

.dip-item .dip-content-text iframe{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden;
    border-radius:16px;
}

.dip-item .dip-info-box{
    background:#f8fafc;

    border-radius:18px;

    padding:22px;

    min-height:120px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    box-shadow:
        0 2px 10px rgba(0,0,0,.04);
}

.dip-item .dip-info-box small{
    color:#6b7280;
    font-size:14px;
}

.dip-item .dip-info-value{
    font-size:30px;
    font-weight:700;
    margin-top:10px;
}

.dip-item .dip-preview-wrapper{
    height:700px;
}

.dip-item .dip-preview-frame{
    border:none;
    width:100%;
    height:100%;
}

.dip-item .dip-related-card{
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.dip-item .dip-related-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 14px 30px rgba(0,0,0,.08) !important;
}


/* =========================================================
   MOBILE FINAL CLEAN
========================================================= */

@media(max-width:768px){

    /* =====================================
       GLOBAL
    ===================================== */

    .dip-tabs-scroll{
        gap:10px;
        scroll-snap-type:x mandatory;
        padding-bottom:6px;
    }

    .dip-tab{
        min-width:130px;

        padding:12px 14px;

        border-radius:18px;

        scroll-snap-align:start;

        font-size:.9rem;
    }

    /* =====================================
       INDEX PAGE
    ===================================== */

    .dip-index .container{
        padding-left:14px;
        padding-right:14px;
    }

    .dip-index .card-body{
        padding:1.2rem !important;
    }

    .dip-index .dip-hover-card{
        border-radius:22px !important;
    }

    .dip-index h5{
        line-height:1.45;
        font-size:1.05rem;
    }

    /* =====================================
       GROUP PAGE
    ===================================== */

    .dip-group .container{
        padding-left:14px;
        padding-right:14px;
    }

    .dip-group .row.g-2{
        gap:10px;
    }

    .dip-group .form-control,
    .dip-group .form-select{
        height:48px;
        border-radius:16px !important;
        font-size:15px;
    }

    .dip-group .dip-group-card{
        border-radius:22px;
    }

    .dip-group .dip-item-title{
        min-height:auto;

        line-height:1.45;

        font-size:1rem;
    }

    .dip-group .card-body{
        padding:1.2rem !important;
    }

    .dip-group .btn{
        min-height:46px;
    }

    /* =====================================
       ITEM PAGE
    ===================================== */

    .dip-item .container-fluid{
        padding-top:24px !important;
        padding-bottom:24px !important;
    }

    .dip-item .dip-item-container{
        padding-left:14px;
        padding-right:14px;
    }

    .dip-item h1{
        font-size:1.9rem !important;

        line-height:1.3;

        margin-bottom:16px !important;
    }

    .dip-item .text-center.mb-5{
        margin-bottom:2rem !important;
    }

    /* ---------- INFO BOX ---------- */

    .dip-item .row.g-3{
        --bs-gutter-x:12px;
        --bs-gutter-y:12px;
    }

    .dip-item .dip-info-box{
        min-height:110px;

        padding:14px 10px;

        border-radius:18px;

        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;

        text-align:center;
    }

    .dip-item .dip-info-box small{
        font-size:.82rem;

        line-height:1.3;

        margin-bottom:8px;

        color:#6b7280;
    }

    .dip-item .dip-info-value{
        font-size:1.8rem;

        line-height:1;

        font-weight:700;

        display:flex;
        align-items:center;
        justify-content:center;

        text-align:center;
    }

    .dip-item .dip-info-value.text-primary{
        font-size:1.5rem;

        word-break:break-word;
    }

    /* ---------- CARD ---------- */

    .dip-item .card{
        border-radius:22px !important;
    }

    .dip-item .card-body,
    .dip-item .card-header,
    .dip-item .p-4{
        padding:1.2rem !important;
    }

    /* ---------- TYPOGRAPHY ---------- */

    .dip-item .dip-content-text{
        font-size:15px;
        line-height:1.9;
    }

    .dip-item .dip-content-text p{
        margin-bottom:1rem;
    }

    .dip-item ul li{
        align-items:flex-start;
    }

    .dip-item ul li span{
        line-height:1.7;
    }

    /* ---------- IMAGE ---------- */

    .dip-item img,
    .dip-item canvas,
    .dip-item svg{
        max-width:100% !important;
        height:auto !important;
    }

    /* ---------- PREVIEW ---------- */

    .dip-item .dip-preview-wrapper{
        height:420px;
    }

    .dip-item .dip-preview-frame{
        border-radius:0 0 18px 18px;
    }

    /* ---------- FILE LIST ---------- */

    .dip-item .list-group-item{
        flex-direction:column;

        align-items:flex-start !important;

        gap:16px;

        overflow:hidden;
    }

    .dip-item .list-group-item > .d-flex{
        width:100%;

        align-items:flex-start !important;

        gap:12px;
    }

    .dip-item .list-group-item h6{
        font-size:1rem;

        line-height:1.5;

        word-break:break-word;

        margin-bottom:6px !important;
    }

    .dip-item .list-group-item small{
        display:block;

        line-height:1.6;

        word-break:break-word;
    }

    .dip-item .list-group-item .btn{
        width:100%;

        display:flex;
        justify-content:center;
        align-items:center;

        min-height:48px;

        font-size:15px;

        margin-top:4px;
    }

    /* ---------- RELATED ---------- */

    .dip-item .dip-related-card{
        padding:1rem !important;
    }

    .dip-item .dip-related-card h6{
        line-height:1.5;
        font-size:1rem;
    }

    /* ---------- BUTTON ---------- */

    .dip-item .text-center.mt-5{
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .dip-item .text-center.mt-5 .btn{
        width:100%;
        margin:0 !important;

        border-radius:16px !important;
    }

    /* =====================================
       FOOTER
    ===================================== */

    footer .row > div{
        margin-bottom:2rem;
    }

    footer .card{
        margin-top:1rem;
    }


/* =========================================================
   EMBED HTML / IFRAME
========================================================= */

.dip-embed-chart{
    width:100%;

    margin:28px auto;

    overflow:hidden;

    border-radius:24px;

    background:#ffffff;

    box-shadow:
        0 8px 30px rgba(0,0,0,.05);
}

.dip-chart-frame{
    width:100%;

    min-height:600px;

    border:none;

    display:block;

    background:#ffffff;
}

@media(max-width:768px){

    .dip-embed-chart{
        margin:22px auto;

        border-radius:20px;
    }

}

	
}