header{
padding:var(--gap) var(--gap) 0;
text-align:center;
}
.logo{
font-size:2.8rem;
font-weight:700;
color:var(--cl1);
letter-spacing:-0.5px;
}
.logo span{color:var(--ac1);}
.tagline{
color:var(--cl2);
font-size:1.1rem;
margin-top:8px;
font-weight:400;
}
main{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
padding:60px var(--gap) var(--gap);
}
.input-wrap{
width:100%;
max-width:var(--mw);
}
.url-input{
width:100%;
padding:22px 28px;
font-size:1.25rem;
font-family:var(--ff1);
background:#1e1e1e;
border:2px solid #666;
border-radius:var(--br1);
color:var(--cl1);
outline:none;
transition:border-color 0.2s,box-shadow 0.2s;
}
.url-input::placeholder{color:var(--cl2);}
.url-input:focus{
border-color:var(--ac1);
box-shadow:0 0 0 4px rgba(240,85,51,0.2);
}
.input-hint{
color:var(--cl3);
font-size:0.8rem;
margin-top:6px;
text-align:center;
opacity:0;
transition:opacity 0.2s;
}
.url-input:focus ~ .input-hint{opacity:1;}
.upload-zone{
width:100%;
max-width:var(--mw);
margin-top:16px;
padding:28px 20px;
border:2px dashed var(--bc1);
border-radius:var(--br1);
text-align:center;
cursor:pointer;
transition:border-color 0.2s,background 0.2s;
}
.upload-zone:hover,
.upload-zone.dragover{
border-color:var(--ac1);
background:rgba(240,85,51,0.05);
}
.upload-icon{
color:var(--cl3);
margin-bottom:8px;
}
.upload-text{
color:var(--cl2);
font-size:1rem;
}
.upload-label{
color:var(--ac1);
cursor:pointer;
font-weight:500;
}
.upload-label:hover{text-decoration:underline;}
.upload-sub{
color:var(--cl3);
font-size:0.85rem;
margin-top:4px;
}
.queue{
width:100%;
max-width:var(--mw);
margin-top:16px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
gap:10px;
}
.queue:empty{margin-top:0;}
.queue-item{
display:flex;
flex-direction:column;
align-items:center;
width:100px;
padding:8px;
background:var(--bg2);
border:1px solid var(--bc1);
border-radius:var(--br2);
position:relative;
animation:fadeSlideUp 0.2s ease;
}
.queue-item .qi-preview{
width:80px;
height:80px;
border-radius:6px;
overflow:hidden;
flex-shrink:0;
background:var(--bg3);
display:flex;
align-items:center;
justify-content:center;
}
.queue-item .qi-preview img{
width:100%;
height:100%;
object-fit:cover;
}
.queue-item .qi-preview .qi-icon{
font-size:1.4rem;
color:var(--cl3);
}
.queue-item .qi-info{
width:100%;
margin-top:6px;
text-align:center;
min-width:0;
}
.queue-item .qi-name{
font-size:0.7rem;
font-weight:500;
color:var(--cl2);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.queue-item .qi-meta{
font-size:0.65rem;
color:var(--cl3);
margin-top:1px;
}
.queue-item .qi-remove{
position:absolute;
top:-6px;
right:-6px;
width:20px;
height:20px;
border:none;
background:var(--bg3);
color:var(--cl3);
cursor:pointer;
font-size:0.8rem;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
flex-shrink:0;
line-height:1;
transition:background 0.15s,color 0.15s;
}
.queue-item .qi-remove:hover{
color:#fff;
background:var(--ac1);
}
.analyze-btn{
margin-top:16px;
padding:14px 32px;
font-size:1.1rem;
font-family:var(--ff1);
font-weight:600;
background:var(--ac1);
color:#fff;
border:none;
border-radius:var(--br2);
cursor:pointer;
display:flex;
align-items:center;
gap:8px;
transition:background 0.15s,transform 0.1s;
}
.analyze-btn:hover{background:var(--ac1-light);}
.analyze-btn:active{transform:scale(0.97);}
.analyze-btn:disabled{
opacity:0.5;
cursor:not-allowed;
transform:none;
}
.supported{
display:flex;
gap:16px;
justify-content:center;
margin-top:24px;
flex-wrap:wrap;
}
.supported span{
color:var(--cl3);
font-size:0.85rem;
display:flex;
align-items:center;
gap:6px;
}
.supported span::before{
content:"";
width:6px;
height:6px;
border-radius:50%;
background:var(--ac1);
opacity:0.5;
display:inline-block;
}
.progress-wrap{
width:100%;
max-width:var(--mw);
margin-top:40px;
display:none;
}
.progress-wrap.active{display:block;}
.progress-bar{
width:100%;
height:4px;
background:var(--bg3);
border-radius:2px;
overflow:hidden;
}
.progress-fill{
height:100%;
background:var(--ac1);
border-radius:2px;
width:0%;
transition:width 0.3s ease;
}
.progress-text{
color:var(--cl2);
font-size:0.9rem;
margin-top:10px;
text-align:center;
}
.results{
width:100%;
max-width:var(--mw);
margin-top:40px;
display:none;
}
.results.active{display:flex;flex-direction:column;gap:24px;}
.result-card{
background:var(--bg2);
border:1px solid var(--bc1);
border-radius:var(--br1);
padding:var(--gap);
opacity:0;
transform:translateY(12px);
animation:fadeSlideUp 0.35s ease forwards;
}
.result-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:16px;
}
.result-source{
font-size:0.85rem;
color:var(--cl2);
text-transform:uppercase;
letter-spacing:1px;
font-weight:600;
}
.result-type{
font-size:0.75rem;
padding:4px 10px;
background:#1e1e1e;
border-radius:20px;
color:var(--cl2);
}
.result-media{
margin-bottom:16px;
display:flex;
gap:8px;
flex-wrap:wrap;
}
.result-media img,
.result-media video{
max-width:100%;
max-height:400px;
border-radius:var(--br2);
object-fit:contain;
background:#000;
}
.result-media .media-thumb{
width:120px;
height:120px;
border-radius:var(--br2);
object-fit:cover;
cursor:pointer;
transition:opacity 0.15s;
}
.result-media .media-thumb:hover{opacity:0.8;}
.result-title{
font-size:1.3rem;
font-weight:600;
margin-bottom:12px;
line-height:1.4;
}
.result-body{
font-size:1.05rem;
line-height:1.7;
color:var(--cl2);
white-space:normal;
}
.result-body p{margin:0 0 10px;}
.result-body p:last-child{margin-bottom:0;}
.result-body p:empty{display:none;}
.result-body h2{
font-size:1.15rem;
font-weight:600;
color:var(--cl1);
margin:20px 0 8px;
padding:6px 0;
cursor:pointer;
display:flex;
align-items:center;
gap:8px;
user-select:none;
}
.result-body h2::before{
content:"";
width:0;
height:0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:6px solid var(--ac1);
transition:transform 0.2s;
flex-shrink:0;
}
.result-body h2.collapsed::before{
transform:rotate(-90deg);
}
.result-body h3{font-size:1.05rem;font-weight:600;color:var(--cl1);margin:18px 0 6px;}
.result-body h4{font-size:1rem;font-weight:600;color:var(--cl1);margin:14px 0 4px;}
.result-body strong{color:var(--cl1);font-weight:600;}
.result-body em{font-style:italic;}
.result-body ul{list-style:none;padding:0;margin:4px 0 12px;}
.result-body li{padding:2px 0 2px 18px;position:relative;line-height:1.5;}
.result-body li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--ac1);opacity:0.6;}
.result-body hr{border:none;border-top:1px solid var(--bc1);margin:16px 0;}
.result-body a{color:var(--lnk);}
.result-body a:hover{text-decoration:underline;}
.result-body .section-content{
overflow:hidden;
transition:max-height 0.3s ease,opacity 0.2s ease;
}
.result-body .section-content.collapsed{
max-height:0 !important;
opacity:0;
}
.result-preview{
margin-bottom:16px;
display:flex;
align-items:center;
gap:14px;
padding:12px;
background:var(--bg3);
border-radius:var(--br2);
}
.result-preview img{
width:64px;
height:80px;
object-fit:cover;
border-radius:4px;
flex-shrink:0;
cursor:pointer;
}
.result-preview .rp-info{font-size:0.9rem;color:var(--cl2);}
.result-preview .rp-pages{
font-size:0.8rem;
color:var(--ac1);
font-weight:500;
margin-top:2px;
}
.result-actions{
display:flex;
gap:10px;
margin-top:20px;
padding-top:16px;
flex-wrap:wrap;
}
.result-actions button{
padding:8px 18px;
font-size:0.9rem;
font-family:var(--ff1);
border:1px solid var(--bc1);
border-radius:var(--br2);
background:#1e1e1e;
color:var(--cl1);
cursor:pointer;
transition:background 0.15s,border-color 0.15s;
}
.result-actions button:hover{
background:var(--bc1);
border-color:var(--bc2);
}
.result-actions button.primary{
background:var(--ac1);
border-color:var(--ac1);
color:#fff;
}
.result-actions button.primary:hover{
background:var(--ac1-light);
border-color:var(--ac1-light);
}
.lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,0.92);
z-index:9999;
display:none;
align-items:center;
justify-content:center;
cursor:zoom-out;
animation:fadeIn 0.15s ease;
}
.lightbox.active{display:flex;}
.lb-close{
position:absolute;
top:20px;
right:24px;
background:none;
border:none;
color:#fff;
font-size:2.2rem;
cursor:pointer;
z-index:10000;
opacity:0.7;
transition:opacity 0.15s;
line-height:1;
}
.lb-close:hover{opacity:1;}
.lb-img{
max-width:92vw;
max-height:90vh;
object-fit:contain;
border-radius:8px;
cursor:default;
}
.toast-container{
position:fixed;
bottom:24px;
right:24px;
z-index:10001;
display:flex;
flex-direction:column;
gap:8px;
pointer-events:none;
}
.toast{
padding:12px 20px;
background:var(--bg2);
border:1px solid var(--bc1);
border-radius:var(--br2);
color:var(--cl1);
font-size:0.9rem;
font-family:var(--ff1);
pointer-events:auto;
animation:toastIn 0.25s ease;
box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.toast.out{animation:toastOut 0.2s ease forwards;}
.toast.success{border-color:rgba(80,200,120,0.4);}
.toast.error{border-color:rgba(240,85,51,0.4);}
.history-section{
width:100%;
max-width:var(--mw);
margin-top:48px;
display:none;
}
.history-section.active{display:block;}
.history-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:12px;
}
.history-header h3{
font-size:1rem;
font-weight:600;
color:var(--cl3);
}
.history-clear{
background:none;
border:none;
color:var(--cl3);
font-size:0.8rem;
cursor:pointer;
font-family:var(--ff1);
padding:4px 8px;
}
.history-clear:hover{color:var(--cl2);}
.history-list{
display:flex;
flex-direction:column;
gap:6px;
}
.history-item{
display:flex;
align-items:center;
gap:12px;
padding:10px 14px;
background:var(--bg2);
border:1px solid var(--bc1);
border-radius:var(--br2);
cursor:pointer;
transition:border-color 0.15s;
}
.history-item:hover{border-color:var(--bc2);}
.hi-source{
font-size:0.7rem;
text-transform:uppercase;
letter-spacing:0.5px;
color:var(--cl3);
font-weight:600;
min-width:60px;
}
.hi-title{
font-size:0.9rem;
color:var(--cl2);
flex:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.hi-time{
font-size:0.75rem;
color:var(--cl3);
flex-shrink:0;
}
.error-msg{
width:100%;
max-width:var(--mw);
margin-top:20px;
padding:16px 20px;
background:rgba(240,85,51,0.1);
border:1px solid rgba(240,85,51,0.3);
border-radius:var(--br2);
color:var(--ac1-light);
font-size:0.95rem;
display:none;
}
.error-msg.active{display:block;}
footer{
padding:var(--gap);
text-align:center;
color:var(--cl3);
font-size:0.8rem;
}
footer a{color:var(--cl3);}
footer a:hover{color:var(--cl2);}
@keyframes fadeSlideUp{
from{opacity:0;transform:translateY(12px);}
to{opacity:1;transform:translateY(0);}
}
@keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}
@keyframes toastIn{
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}
}
@keyframes toastOut{
from{opacity:1;transform:translateY(0);}
to{opacity:0;transform:translateY(10px);}
}
@media(max-width:600px){
main{padding:40px 16px 16px;}
.url-input{padding:16px 18px;font-size:1.05rem;}
.logo{font-size:2rem;}
.result-title{font-size:1.1rem;}
.upload-zone{padding:20px 16px;}
.supported{gap:10px;}
.supported span{font-size:0.8rem;}
.queue-item{width:80px;padding:6px;}
.queue-item .qi-preview{width:64px;height:64px;}
.toast-container{bottom:12px;right:12px;left:12px;}
.result-actions{gap:6px;}
.result-actions button{padding:6px 14px;font-size:0.85rem;}
.lightbox{padding:12px;}
}