.bundle-body{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
height:var(--ch1);
background:var(--cbg);
border-radius:var(--br1);
cursor:default;
box-shadow:var(--csh);
position:relative;
overflow:hidden;
}
.bundle-body::before{
content:'';
position:absolute;
inset:0;
border-radius:var(--br1);
box-shadow:inset 0 0 0 2px var(--ac2-dark);
pointer-events:none;
z-index:5;
transition:box-shadow 80ms ease;
}
.clip-bundle:hover .bundle-body::before{
box-shadow:inset 0 0 0 2px var(--ac2);
}
.bundle-preview-grid{
position:absolute;
inset:0;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
gap:2px;
border-radius:var(--br1);
overflow:hidden;
opacity:1;
transition:opacity 80ms ease;
}
.bundle-preview-grid.bp-count-1{
grid-template-columns:1fr;
grid-template-rows:1fr;
}
.bundle-preview-grid.bp-count-2{
grid-template-columns:1fr 1fr;
grid-template-rows:1fr;
}
.bundle-preview-grid.bp-count-3{
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
}
.bundle-preview-grid.bp-count-3 .bundle-preview-cell:first-child{
grid-column:1 / -1;
}
.bundle-preview-cell{
overflow:hidden;
background:var(--n01);
}
.bundle-preview-cell img{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:brightness(.55);
}
.bundle-preview-note{
width:100%;
height:100%;
padding:6px;
font-size:var(--fz5);
line-height:1.3;
color:var(--cl2);
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
opacity:.5;
}
.bundle-badge{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
z-index:4;
pointer-events:none;
}
.bundle-badge-num{
font-size:48px;
font-weight:800;
line-height:1;
color:#fff;
text-shadow:0 2px 16px rgba(0,0,0,.6);
letter-spacing:-2px;
}
.clip-bundle:not(.bundle-has-previews) .bundle-badge-num{
color:var(--ac2);
text-shadow:none;
}
.multi-sel-bar .bundle-btn,
.multi-sel-bar .unbundle-btn,
.multi-sel-bar .dissolve-btn{
transition:opacity 150ms ease,transform 150ms ease;
}
.multi-sel-bar .bundle-btn:hover svg,
.multi-sel-bar .unbundle-btn:hover svg,
.multi-sel-bar .dissolve-btn:hover svg{
transform:scale(1.14);
}
.multi-sel-bar .bundle-btn svg,
.multi-sel-bar .unbundle-btn svg,
.multi-sel-bar .dissolve-btn svg{
width:26px;
height:26px;
}
.multi-sel-bar .bundle-btn{
background:var(--ac2-dark-dark);
border-color:var(--ac2-dark);
}
.multi-sel-bar .bundle-btn:hover{
background:var(--ac2-dark);
border-color:var(--ac2);
}
.multi-sel-bar .bundle-btn path,
.multi-sel-bar .bundle-btn rect{
stroke:var(--ac2);
fill:none;
}
.multi-sel-bar .unbundle-btn,
.multi-sel-bar .dissolve-btn{
background:var(--ac1-dark-dark);
border-color:var(--ac1-dark);
}
.multi-sel-bar .unbundle-btn:hover,
.multi-sel-bar .dissolve-btn:hover{
background:var(--ac1-dark);
border-color:var(--ac1);
}
.multi-sel-bar .unbundle-btn path,
.multi-sel-bar .unbundle-btn rect,
.multi-sel-bar .dissolve-btn path,
.multi-sel-bar .dissolve-btn rect{
stroke:var(--ac1);
fill:none;
}
.bundle-back-card{
cursor:default;
position:relative;
pointer-events:auto;
}
.bundle-back-card .bundle-body{
background:var(--ac2);
}
.bundle-back-card .bundle-body::before{
box-shadow:none;
}
.bundle-back-card:hover .bundle-body{
background:var(--ac2-light, var(--ac2));
}
.bundle-back-card:hover .bundle-body::before{
box-shadow:none;
}
.bundle-back-card .bundle-preview-grid{
display:none;
}
.bundle-back-badge{
flex-direction:column;
gap:4px;
}
.bundle-back-arrow{
display:flex;
align-items:center;
justify-content:center;
color:#fff;
opacity:1;
}
.bundle-back-arrow svg{
width:56px;
height:56px;
filter:drop-shadow(0 1px 4px rgba(0,0,0,.3));
}
.bundle-back-card .clip-sel-check{
display:none;
}
.bundle-back-card .pill-container{
display:none;
}
.bundle-back-card.back-card-drop-hover .bundle-body{
background:var(--ac2-light, var(--ac2));
outline:3px solid #fff;
outline-offset:-3px;
transform:scale(1.04);
transition:transform .12s ease,outline .12s ease;
}
.bundle-back-card.sortable-ghost,
.bundle-back-card.sortable-chosen{
display:none;
}
.bundle-breadcrumb{
display:inline-flex;
align-items:center;
gap:0;
}
.breadcrumb-folder{
opacity:.55;
cursor:pointer;
transition:opacity .15s ease;
}
.breadcrumb-folder:hover{
opacity:1;
text-decoration:underline;
}
.breadcrumb-sep{
opacity:.35;
margin:0 6px;
font-size:var(--fz4);
}
.breadcrumb-current{
opacity:1;
}