.dahai-card-hover-preview{
    position:absolute;
    z-index:999999;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    user-select:none;
    transform:translateY(8px) scale(.985);
    transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}

.dahai-card-hover-preview.is-show{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

.dahai-card-hover-preview-inner{
    width:100%;
    min-height:100%;
    padding:8px;
    box-sizing:border-box;
    border-radius:4px;
    background:#fff;
    border:1px solid rgba(226,232,240,.9);
    box-shadow:0 10px 24px rgba(0,0,0,.10);
    overflow:hidden;
    pointer-events:none;
}

.dahai-card-hover-preview-body{
    width:100%;
    height:100%;
    border-radius:4px;
    overflow:hidden;
    background:#fff;
    display:flex;
    flex-direction:column;
}

.dahai-card-hover-preview-media{
    display:block;
    width:100%;
    aspect-ratio:16 / 9;
    object-fit:cover;
    background:#000;
    flex:0 0 auto;
}

.dahai-card-hover-preview-meta{
    position:relative;
    padding:10px 10px 11px;
    display:flex;
    flex-direction:column;
    gap:8px;
    color:#334155;
    font-size:12px;
    line-height:1.45;
    pointer-events:none;
}

.dahai-card-hover-preview-main{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:12px;
    min-width:0;
}

.dahai-card-hover-preview-left{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

.dahai-card-hover-preview-size,
.dahai-card-hover-preview-version{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:#334155;
}

.dahai-card-hover-preview-size,
.dahai-card-hover-preview-version{
    display:flex;
    align-items:center;
    gap:6px;
}

.dahai-card-hover-preview-size span,
.dahai-card-hover-preview-version span{
    flex:0 0 auto;
    color:#64748b;
}

.dahai-card-hover-preview-size b,
.dahai-card-hover-preview-version b{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:#334155;
    font-weight:400;
}

.dahai-card-hover-preview-review{
    flex:0 0 auto;
    align-self:center;
    color:#687eff;
    font-size:15px;
    font-weight:700;
    line-height:1.3;
    white-space:nowrap;
}

.dahai-card-hover-preview-date,
.dahai-card-hover-preview-tags{
    color:#64748b;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.dahai-card-hover-preview-tags span{
    margin:0 5px;
    color:#c0c6d4;
}

.dahai-card-title-rating{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.dahai-card-title-rating h2{
    flex:1 1 auto;
    min-width:0;
    margin:0;
    overflow:hidden;
}

.dahai-card-title-rating h2 a,
.dahai-card-title-rating h2 span{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.dahai-card-title-rating span{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:#687eff;
    font-size:12px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

.dahai-card-title-rating span i{
    font-style:normal;
    color:#687eff;
    font-size:13px;
}

.dahai-card-title-rating span .dahai-rating-star{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1em;
    height:1em;
    color:#687eff;
}

.dahai-card-title-rating span .dahai-rating-star svg{
    display:block;
    width:1em;
    height:1em;
}

body.night .dahai-card-hover-preview-inner,
body.night .dahai-card-hover-preview-body{
    background:#1f2430;
    border-color:rgba(255,255,255,.08);
}

body.night .dahai-card-hover-preview-size,
body.night .dahai-card-hover-preview-version,
body.night .dahai-card-hover-preview-size b,
body.night .dahai-card-hover-preview-version b{
    color:#dbe3f0;
}

body.night .dahai-card-hover-preview-review{
    color:#687eff;
}

body.night .dahai-card-hover-preview-date,
body.night .dahai-card-hover-preview-tags{
    color:#aeb6c7;
}

body.night .dahai-card-hover-preview-tags span{
    color:#737d92;
}

a.dahai-card-hover-preview-link,
.dahai-card-hover-preview a{
    pointer-events:none;
    cursor:default;
    text-decoration:none;
    color:inherit;
}

@media (max-width: 768px){
    .dahai-card-hover-preview{
        display:none !important;
    }
}