:root{
  --blue-900: #1e293b;
  --blue-700: #2563eb;
  --blue-400: #60a5fa;
  --bg: #0a0a0a;
  --surface: #1e293b;
  --muted: #64748b;
  --text-primary: #f3f4f6;
  --text-accent: #60a5fa;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:var(--text-primary); background:var(--bg)}
.site-header{display:flex;align-items:center;gap:12px;padding:20px;background:linear-gradient(90deg,var(--blue-900),var(--blue-700));color:var(--text-primary)}
.site-header .logo{width:56px;height:56px}
.site-header h1{font-size:20px;margin:0}
.hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:48px 20px;gap:24px}
.hero-content{flex:1;min-width:260px;max-width:680px}
.hero h2{font-size:28px;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 18px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 18px;border-radius:8px;border:1px solid var(--blue-700);background:var(--surface);color:var(--text-accent);text-decoration:none;font-weight:600}
.btn.primary{background:var(--blue-700);color:var(--text-primary);border:none}
.hero-art img{width:220px;max-width:40vw}
.features{padding:24px 20px;background:var(--surface)}
.features h3{margin-top:0}
.features ul{margin:12px 0 0;padding-left:20px}
.site-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-size:14px;color:var(--muted)}
.site-footer nav a{margin-left:12px;color:var(--muted);text-decoration:none}

@media(min-width:900px){
  .hero{padding:64px 64px}
  .hero h2{font-size:36px}
}

/* Verifier styles */
.verifier{padding:32px 20px;background:var(--surface);border-top:1px solid var(--blue-700);color:var(--text-primary)}
.verifier .container{max-width:960px;margin:0 auto}
.verifier h3{margin-top:0;color:var(--text-primary)}
.verifier p{color:var(--text-accent)}
.verifier .input-group{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.verifier .input-block input[type="url"], .verifier .input-block input[type="file"], .verifier .input-block input[type="text"]{
    width:100%;
    padding:10px;
    border-radius:8px;
    background-color: var(--blue-900);
    color: var(--text-primary);
    border:1px solid var(--blue-700)
}
.verifier .actions{margin-top:12px}
.verifier .result{margin-top:16px}
.result-card{
    padding: 20px;
    background:var(--surface);
    border-radius:8px;
    box-shadow:0 4px 12px rgba(30,41,59,0.12);
    transition: all 0.3s ease;
}
.result-card h4 {
    margin: 0 0 16px 0;
    font-size: 18px;
}
.result-card.fake{
    border-left:4px solid #e11d48;
    background: linear-gradient(to right, rgba(225,29,72,0.1), var(--surface));
}
.result-card.original{
    border-left:4px solid #10b981;
    background: linear-gradient(to right, rgba(16,185,129,0.1), var(--surface));
}
.result-card .note{
    color:var(--muted);
    margin:12px 0;
}
.result-card .details {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--blue-700);
}
.result-card .details ul {
    margin: 0;
    padding-left: 20px;
    color: var(--text-accent);
}
.score-bar {
    height: 8px;
    background: var(--blue-900);
    border-radius: 4px;
    margin: 12px 0;
    overflow: hidden;
}
.score-fill {
    height: 100%;
    background: var(--text-accent);
    transition: width 1s ease-out;
}
.loading-animation {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--surface), var(--text-accent), var(--surface));
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    margin-bottom: 16px;
}
@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.loading {
    opacity: 0.7;
}
.error{
    color:#e11d48;
    margin:0;
}

/* Result chip styles */
#verifier-result.ai{
  color: #fff;
  background: linear-gradient(90deg,#ef4444,#f97316);
  box-shadow: 0 8px 24px rgba(239,68,68,0.12);
}
#verifier-result.human{
  color: #fff;
  background: linear-gradient(90deg,#10b981,#06b6d4);
  box-shadow: 0 8px 24px rgba(16,185,129,0.12);
}
#verifier-result{transition: all .25s ease;}

/* Centered card and brand */
.center-card{max-width:720px;margin:48px auto;padding:30px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), var(--surface));border:1px solid rgba(255,255,255,0.02);text-align:center}
.brand-center{display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.logo-large{width:84px;height:84px;display:block}

.brand-badge{display:flex;flex-direction:column;align-items:center;justify-content:center}
.brand-name{margin-top:8px;font-weight:700;color:var(--text-primary);font-size:18px;letter-spacing:0.4px}

/* Position badge to overlap card */

.brand-badge{display:flex;flex-direction:column;align-items:center;justify-content:center}
.brand-name{margin-top:8px;font-weight:700;color:var(--text-primary);font-size:18px;letter-spacing:0.4px}

.center-card{padding-top:24px}

/* Side brand - fixed to the right */
.side-brand{position:fixed;z-index:60}
/* Right large badge in top-right corner */
.side-brand.side-brand-right{top:20px;right:20px;left:auto;transform:none}
.side-brand.side-brand-right .logo-large{width:84px;height:84px}
.side-brand.side-brand-right .brand-name{font-size:16px;margin-top:8px}

/* Left side positioned top-left corner and enlarged */
.side-brand.side-brand-left{top:20px;left:20px;right:auto;transform:none}
.side-brand.side-brand-left .logo-large{width:84px;height:84px}
.side-brand.side-brand-left .brand-name{font-size:16px;margin-top:8px}

.side-brand .brand-badge{align-items:center}
.side-brand .logo-large{width:56px;height:56px}
.side-brand .brand-name{font-size:14px;margin-top:6px}

/* Fallback for very narrow screens */
@media (max-width:880px){
  .side-brand{display:none}
}

/* Tweak verifier layout inside centered card */
.verifier{padding:24px 10px;background:transparent;border-top:none}
.verifier .container{max-width:560px;margin:0 auto}