/* PAGE BACKGROUND */

body{

margin:0;

font-family:"Verdana", sans-serif;

/* retro gradient */

background:
linear-gradient(180deg,#dbeafe 0%,#f1f5f9 100%);

}


/* TABLE LAYOUT FIX */

table{

width:100%;

border-collapse:collapse;

}


/* SIDEBAR */

.sidebar{

background:#e5e7eb;

border-right:3px solid #94a3b8;

padding:15px;

width:220px;

font-size:14px;

}


/* sidebar headings */

.sidebar h3{

background:#1e3a8a;

color:white;

padding:6px;

margin-top:10px;

font-size:14px;

border-radius:4px;

}


/* sidebar text */

.sidebar p{

margin:6px 0;

}


/* HEADER */

h1{

background:#1e3a8a;

color:white;

padding:14px;

margin:0;

font-size:28px;

box-shadow:0 2px 4px rgba(0,0,0,0.2);

}


/* tagline */

.tagline{

margin:10px 0;

font-size:14px;

color:#334155;

}


/* marquee funny highlight */

marquee{

color:#dc2626;

font-weight:bold;

margin-bottom:10px;

}


/* INPUT */

.input-section{

margin-top:15px;

}


input{

padding:8px;

border:2px solid #94a3b8;

border-radius:6px;

width:220px;

font-size:14px;

}


/* BUTTON */

button{

padding:8px 14px;

border:none;

background:#22c55e;

color:white;

font-weight:bold;

border-radius:6px;

cursor:pointer;

margin-left:8px;

transition:0.2s;

}


button:hover{

background:#16a34a;

transform:scale(1.05);

}


/* LOADING TEXT */

.loading{

margin-top:10px;

color:#2563eb;

display:none;

}


/* AD CARD */

.ad-card{

margin-top:20px;

background:white;

padding:18px;

border-radius:12px;

box-shadow:0 4px 12px rgba(0,0,0,0.15);

width:340px;

}


/* IMAGE */

.ad-card img{

width:300px;

height:180px;

object-fit:cover;

border-radius:8px;

border:1px solid #ccc;

background:#f1f5f9;

}


/* confidence */

.confidence{

background:#fef08a;

padding:6px;

margin-top:8px;

border-radius:6px;

font-size:13px;

}


/* explanation */

.explanation{

margin-top:8px;

font-size:13px;

color:#334155;

background:#f1f5f9;

padding:8px;

border-radius:6px;

}


/* footer */

.footer{

margin-top:40px;

font-size:12px;

color:#475569;

text-align:center;

}


/* funny blinking */

blink{

animation: blink-animation 1s steps(2,start) infinite;

color:#dc2626;

font-weight:bold;

}


@keyframes blink-animation{

to{

visibility:hidden;

}

}
.banner{
background:yellow;
border:2px dashed red;
padding:6px;
margin:10px auto;
width:300px;
font-weight:bold;
}
.counter{
background:black;
color:lime;
display:inline-block;
padding:5px 8px;
font-family:monospace;
letter-spacing:2px;
}