/*=========================================
AI IMAGE DETECTOR
Part 2A
=========================================*/

/* Upload Area */

.upload-area{

width:100%;

border:3px dashed #cbd5e1;

border-radius:18px;

padding:55px 30px;

text-align:center;

cursor:pointer;

background:#f8fafc;

transition:.35s;

margin:25px 0;

}

.upload-area:hover{

border-color:#4f46e5;

background:#eef2ff;

}

.upload-area.dragover{

border-color:#8b5cf6;

background:#ede9fe;

transform:scale(1.01);

}

.upload-content{

pointer-events:none;

}

.upload-icon{

font-size:72px;

margin-bottom:18px;

}

.upload-content h3{

font-size:28px;

margin-bottom:10px;

color:#1e293b;

}

.upload-content p{

font-size:18px;

color:#64748b;

margin-bottom:8px;

}

.upload-content span{

font-size:14px;

color:#94a3b8;

}

/* Preview */

.preview-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

margin-top:35px;

}

.preview-card{

background:#fff;

border:2px solid #e2e8f0;

border-radius:18px;

padding:25px;

}

.preview-card h3{

margin-bottom:20px;

font-size:22px;

color:#1e293b;

}

#previewImage{

width:100%;

display:block;

border-radius:14px;

max-height:420px;

object-fit:contain;

background:#f8fafc;

}

/* Image Details */

.image-details{

display:flex;

flex-direction:column;

gap:14px;

}

.image-details p{

display:flex;

justify-content:space-between;

align-items:center;

padding:12px 0;

border-bottom:1px solid #e5e7eb;

font-size:15px;

}

.image-details p:last-child{

border-bottom:none;

}

.image-details strong{

color:#1e293b;

font-weight:600;

}

.image-details span{

color:#475569;

font-weight:500;

text-align:right;

max-width:55%;

word-break:break-word;

}

/* Buttons */

.btn-group{

display:flex;

gap:15px;

margin-top:30px;

flex-wrap:wrap;

}

.btn-group button{

flex:1;

min-width:180px;

}

/* Analyze */

#analyzeBtn{

background:linear-gradient(135deg,#4f46e5,#9333ea);

color:#fff;

border:none;

}

#analyzeBtn:hover{

transform:translateY(-3px);

box-shadow:0 12px 25px rgba(79,70,229,.28);

}

/* Result */

.result-box{

margin-top:40px;

padding:30px;

border:2px solid #e2e8f0;

border-radius:20px;

background:#ffffff;

}

.result-box h2{

margin-bottom:25px;

font-size:30px;

color:#1e293b;

}

/* Responsive */

@media(max-width:991px){

.preview-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.upload-area{

padding:40px 20px;

}

.upload-icon{

font-size:56px;

}

.upload-content h3{

font-size:22px;

}

.btn-group{

flex-direction:column;

}

.btn-group button{

width:100%;

}

}

/*=========================================
AI ANALYSIS CARDS
=========================================*/

.stats-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:20px;

margin:30px 0;

}

.stat-box{

background:#f8fafc;

border:2px solid #e2e8f0;

border-radius:16px;

padding:25px 20px;

text-align:center;

transition:.3s;

}

.stat-box:hover{

transform:translateY(-5px);

border-color:#8b5cf6;

box-shadow:0 12px 30px rgba(139,92,246,.12);

}

.stat-box h3{

font-size:32px;

margin-bottom:10px;

color:#4f46e5;

font-weight:700;

}

.stat-box p{

font-size:15px;

color:#64748b;

margin:0;

}

/*=========================================
SUMMARY
=========================================*/

.analysis-summary{

margin-top:30px;

padding:25px;

background:#f8fafc;

border:2px solid #e2e8f0;

border-left:6px solid #4f46e5;

border-radius:16px;

}

.analysis-summary h3{

font-size:24px;

margin-bottom:15px;

color:#1e293b;

}

.analysis-summary p{

font-size:16px;

line-height:1.8;

color:#475569;

margin:0;

}

/*=========================================
PROGRESS BAR
=========================================*/

.progress-wrapper{

margin-top:30px;

}

.progress-label{

display:flex;

justify-content:space-between;

margin-bottom:10px;

font-weight:600;

font-size:15px;

color:#334155;

}

.progress{

width:100%;

height:14px;

background:#e2e8f0;

border-radius:50px;

overflow:hidden;

}

.progress-fill{

height:100%;

width:0;

border-radius:50px;

background:linear-gradient(90deg,#4f46e5,#9333ea);

transition:width .8s ease;

}


/*=========================================
DISCLAIMER
=========================================*/

.disclaimer-box{

margin-top:40px;

padding:25px;

background:#fff8e1;

border:2px solid #fde68a;

border-left:6px solid #f59e0b;

border-radius:16px;

}

.disclaimer-box h3{

margin-bottom:12px;

font-size:22px;

color:#92400e;

}

.disclaimer-box p{

margin:0;

line-height:1.8;

color:#78350f;

}

/*=========================================
LOADING
=========================================*/

.loading{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

padding:40px 0;

font-size:18px;

font-weight:600;

color:#4f46e5;

}

.loading-spinner{

width:28px;

height:28px;

border:4px solid #e2e8f0;

border-top:4px solid #4f46e5;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

/*=========================================
ANIMATION
=========================================*/

.upload-area,
.preview-card,
.result-box,
.stat-box{

animation:fadeUp .45s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.analysis-summary{

padding:20px;

}

.disclaimer-box{

padding:20px;

}

}

@media(max-width:576px){

.stats-grid{

grid-template-columns:1fr;

}

.result-box{

padding:20px;

}

.analysis-summary h3{

font-size:20px;

}

.disclaimer-box h3{

font-size:20px;

}

.progress{

height:12px;

}

}

.high{

color:#16a34a !important;

font-weight:700;

}

.medium{

color:#ea580c !important;

font-weight:700;

}

.low{

color:#dc2626 !important;

font-weight:700;

}

.seo-content{

    padding:20px 0;
    

}

.seo-content h2{

    font-size:38px;

    font-weight:700;

    margin:55px 0 20px;

    color:#fff;
    position:relative;

padding-bottom:15px;

}

.seo-content h2::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:90px;

height:4px;

background:#8b5cf6;

border-radius:50px;

}

.seo-content p{

    font-size:17px;

    line-height:1.9;

    color:#c8d0e0;

    margin-bottom:22px;
    max-width:1150px;

}

.tool-list{

    margin:25px 0;

}

.tool-list ul{

    list-style:none;

    padding:0;

    margin-top:30px;

    display:grid;

    grid-template-columns:repeat(4,1fr);


    gap:22px;
    

}

}
.tool-list li{

min-height:90px;

display:flex;

align-items:center;
padding-left:65px;
transition:.35s;

}
.tool-list li::before{

left:22px;

width:26px;

height:26px;

font-size:15px;

}
.tool-list li:hover{

transform:translateY(-6px);

border-color:#8b5cf6;

box-shadow:0 12px 35px rgba(139,92,246,.22);

}

.tool-list ul li{

    position:relative;

    padding:15px 18px 15px 52px;

    background:#1b2437;

    border:1px solid rgba(255,255,255,.06);

    border-radius:12px;

    color:#fff;

    transition:.3s;

}

.tool-list ul li:hover{

    border-color:#8b5cf6;

    transform:translateY(-3px);

}



@media(max-width:768px){

.tool-list ul{

grid-template-columns:1fr;

}

.seo-content h2{

font-size:30px;

}

}

.tool-list li i{

position:absolute;

left:22px;

top:50%;

transform:translateY(-50%);

color:#8b5cf6;

font-size:22px;

}