.modal-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.85);
z-index:9998;
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:opacity 80ms ease,visibility 80ms ease;
overflow:auto;
padding:20px;
box-sizing:border-box;
}
.modal-overlay.act{
opacity:1;
visibility:visible;
}
.panel{
position:relative;
background:#0d0d0d;
border:1.5px solid #222;
width:100%;
max-width:480px;
max-height:calc(100vh - 40px);
display:flex;
flex-direction:column;
border-radius:20px;
box-shadow:0 25px 80px rgba(0,0,0,0.6);
transform:scale(0.96);
opacity:0;
transition:transform 80ms ease,opacity 80ms ease;
overflow:hidden;
padding:32px;
box-sizing:border-box;
}
.modal-overlay.act .panel{
transform:scale(1);
opacity:1;
}
.preview-panel{
max-width:700px;
padding:0;
}
.preview-panel .img-preview-con{
background:#0a0a0a;
display:flex;
align-items:center;
justify-content:center;
min-height:200px;
max-height:60vh;
overflow:hidden;
}
.preview-panel .img-preview{
display:block;
width:100%;
height:auto;
max-height:60vh;
object-fit:contain;
cursor:pointer;
}
.preview-title-con{
position:relative;
border-bottom:1px solid rgba(255,255,255,0.06);
overflow-wrap:break-word;
word-break:break-word;
}
.preview-title{
font-size:20px;
font-weight:500;
padding:16px 20px;
margin:0;
min-height:24px;
white-space:pre-wrap;
outline:none;
color:#fff;
overflow-wrap:break-word;
word-break:break-word;
}
.preview-title:empty:before{
content:attr(data-placeholder);
color:#555;
}
.preview-title:focus{
background:rgba(255,255,255,0.02);
}
.preview-content-con{
position:relative;
flex:1;
overflow:hidden;
overflow-wrap:break-word;
word-break:break-word;
}
.preview-content{
font-size:1rem;
line-height:1.6;
padding:16px 20px 20px;
min-height:120px;
max-height:50vh;
overflow-y:auto;
white-space:pre-wrap;
outline:none;
color:#ddd;
scrollbar-color:#333 transparent;
overflow-wrap:break-word;
word-break:break-word;
}
.preview-content:empty:before{
content:attr(data-placeholder);
color:#555;
}
.preview-content:focus{
background:rgba(255,255,255,0.02);
}
.preview-content::-webkit-scrollbar{
width:6px;
}
.preview-content::-webkit-scrollbar-track{
background:transparent;
}
.preview-content::-webkit-scrollbar-thumb{
background:#333;
border-radius:3px;
}
.preview-content a{
color:#4a9eff;
text-decoration:none;
cursor:pointer;
}
.preview-content a:hover{
text-decoration:underline;
}
.placeholder-text{
display:none;
}
.modal-title{
font-size:1.25rem;
color:#fff;
font-weight:600;
text-align:center;
padding:0 0 24px 0;
border-bottom:none;
}
.modal-input{
width:100%;
padding:18px 20px;
font-size:1rem;
font-weight:400;
background:#0d0d0d;
color:#fff;
border:2px solid #333;
border-radius:12px;
margin:0 0 24px 0;
box-sizing:border-box;
transition:border-color 80ms ease;
}
.modal-input::placeholder{
color:#666;
font-weight:400;
}
.modal-input:focus{
border-color:#555;
outline:none;
}
.btn-group{
display:flex;
gap:12px;
justify-content:center;
padding:0;
margin-top: 12px;
}
.btn-group .btn{
padding:14px 32px;
border-radius:var(--br0);
font-size:1rem;
font-weight:600;
border:none;
cursor:pointer;
transition:background 80ms ease,transform 80ms ease;
min-width:100px;
}
.btn-group .btn:active{
transform:scale(0.98);
}
.btn-group .btn-primary{
background:var(--ac1);
color:#fff;
}
.btn-group .btn-primary:hover{
background:#ff6b4a;
}
.btn-group .btn-secondary{
background:#2a2a2a;
color:#fff;
}
.btn-group .btn-secondary:hover{
background:#333;
}
.del-modal{
background:#0d0d0d;
border:1.5px solid #222;
padding:32px;
border-radius:20px;
box-shadow:0 25px 80px rgba(0,0,0,0.6);
text-align:center;
min-width:300px;
transform:scale(0.96);
opacity:0;
}
.modal-overlay.act .del-modal{
transform:scale(1);
opacity:1;
}
.del-modal-btns{
display:flex;
gap:12px;
justify-content:center;
margin-top:24px;
}
.del-modal-btns button{
padding:14px 32px;
font-size:1rem;
font-weight:600;
border-radius:var(--br0);
border:none;
cursor:pointer;
min-width:100px;
box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.del-modal-btns .cancel{
background:#2a2a2a;
color:#fff;
}
.del-modal-btns .cancel:hover{
background:#333;
}
.del-modal-btns .del{
background:#c53030;
color:#fff;
}
.del-modal-btns .del:hover{
background:#e53e3e;
}
.img-stats-con{
border-top:1px solid rgba(255,255,255,0.06);
padding:12px 20px;
font-size:13px;
color:#888;
}