.modal-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.75);
z-index:9998;
backdrop-filter:none;
-webkit-backdrop-filter:none;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:opacity 50ms ease,visibility 50ms ease;
overflow:auto;
overscroll-behavior:contain;
padding:20px;
box-sizing:border-box;
}
.modal-overlay.act{
opacity:1;
visibility:visible;
}
.panel{
position:relative;
background:var(--panel-bg);
border:0;
width:100%;
max-width:480px;
max-height:calc(100vh - 40px);
display:flex;
flex-direction:column;
border-radius:20px;
box-shadow:0 0 3px #000;
transform:scale(0.96);
opacity:0;
transition:transform 50ms ease,opacity 50ms ease;
overflow:hidden;
padding:32px;
box-sizing:border-box;
}
.modal-overlay.act .panel{
transform:scale(1);
opacity:1;
}
.preview-panel{
max-width:550px;
padding:0;
}
.preview-panel .img-preview-con{
background:var(--panel-bg);
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;
overflow-wrap:break-word;
word-break:break-word;
background:var(--panel-bg);
}
.preview-title{
font-size:var(--fz1);
font-weight:500;
padding:16px 32px;
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:transparent;
}
.format-bar{
display:flex;
gap:6px;
padding:8px 32px 0;
}
.format-btn{
width:34px;
height:34px;
border:1.5px solid #333;
border-radius:8px;
background:transparent;
color:#888;
font-size:15px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:background 80ms ease,color 80ms ease,border-color 80ms ease;
}
.format-btn:hover{
background:rgba(255,255,255,0.06);
color:#ccc;
border-color:#444;
}
.format-btn.active{
background:rgba(255,255,255,0.12);
color:#fff;
border-color:#555;
}
.fmt-bold{
font-weight:800;
font-size:15px;
font-family:inherit;
}
.fmt-italic{
font-style:italic;
font-weight:500;
font-size:15px;
font-family:Georgia,serif;
}
.preview-content b,.preview-content strong{
font-weight:700;
color:#fff;
}
.preview-content i,.preview-content em{
font-style:italic;
}
.preview-content{
font-size:var(--fz2);
line-height:1.5;
padding:22px 32px;
min-height:120px;
flex:1;
overflow-y:auto;
white-space:pre-wrap;
outline:none;
color:#ddd;
scrollbar-color:#333 transparent;
overflow-wrap:break-word;
word-break:break-word;
background:var(--panel-bg);
}
.preview-content:empty:before{
content:attr(data-placeholder);
color:#555;
}
.preview-content:focus{
background:var(--panel-bg);
}
.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;
}
.modal-title{
font-size:var(--fz1);
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:var(--fz4);
font-weight:400;
background:var(--panel-bg);
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:var(--fz4);
font-weight:600;
border:none;
cursor:pointer;
transition:background 80ms ease,transform 80ms ease;
min-width:100px;
color:#fff;
}
.btn-group .btn:active{
transform:scale(0.98);
}
.btn-group .btn-primary{
background:var(--ac1);
}
.btn-group .btn-primary:hover{
background:#ff6b4a;
}
.btn-group .btn-secondary{
background:#2a2a2a;
}
.btn-group .btn-secondary:hover{
background:#333;
}
.del-modal{
background:var(--panel-bg);
border:1.5px solid #222;
padding:32px;
border-radius:20px;
box-shadow:0 0 3px #000;
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:var(--fz4);
font-weight:600;
border-radius:var(--br0);
border:none;
cursor:pointer;
min-width:100px;
box-shadow:0 1px 3px rgba(0,0,0,.4);
color:#fff;
}
.del-modal-btns .cancel{
background:#2a2a2a;
}
.del-modal-btns .cancel:hover{
background:#333;
}
.del-modal-btns .del{
background:#c53030;
}
.del-modal-btns .del:hover{
background:#e53e3e;
}
.afm{
max-width:340px;
padding:28px;
gap:0;
border-radius:16px;
border-color:#1a1a1a;
}
.afm-title{
font-size:var(--fz1);
font-weight:600;
color:#fff;
text-align:center;
margin-bottom:24px;
}
.afm-input{
width:100%;
padding:0 0 10px;
font-size:var(--fz2);
font-weight:500;
background:transparent;
color:#fff;
border:none;
border-bottom:1px solid #282828;
border-radius:0;
box-sizing:border-box;
margin-bottom:20px;
transition:border-color 80ms ease;
}
.afm-input::placeholder{
color:#404040;
font-weight:400;
}
.afm-input:focus{
border-bottom-color:#444;
outline:none;
}
.afm-row{
display:flex;
gap:10px;
}
.afm-btn{
flex:1;
padding:13px 0;
border:none;
border-radius:var(--br0);
font-size:var(--fz4);
font-weight:600;
cursor:pointer;
background:#222;
color:#666;
transition:background 80ms ease;
}
.afm-btn:hover{
background:#282828;
}
.afm-btn:active{
background:#1e1e1e;
}
.afm-go{
background:var(--ac2);
color:#000;
}
.afm-go:hover{
background:var(--ac2-dark);
}
.afm-go:active{
background:color-mix(in srgb,var(--ac2),black 30%);
}
.afm-sep{
height:1px;
background:#222;
margin:20px 0 16px;
}
.afm-alt{
display:block;
width:100%;
background:none;
border:none;
color:#444;
font-size:var(--fz4);
font-weight:400;
cursor:pointer;
text-align:center;
padding:0;
transition:color 80ms ease;
}
.afm-alt:hover{
color:#666;
}
.afm-alt span{
font-weight:600;
}