@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap');
:root {
    --primary: #6366f1; --primary-hover: #4f46e5;
    --bg-dark: #0f172a; --bg-card: #1e293b;
    --text-main: #f8fafc; --text-muted: #94a3b8;
    --accent: #10b981; --glass: rgba(30, 41, 59, 0.7);
}
body { margin:0; font-family:'Inter',system-ui,sans-serif; background:radial-gradient(circle at top left,#1e1b4b,#0f172a); color:var(--text-main); min-height:100vh; display:flex; flex-direction:column; align-items:center; }
header { width:100%; padding:2rem 0; text-align:center; }
h1 { font-size:3rem; font-weight:800; margin:0; background:linear-gradient(to right,#818cf8,#c084fc); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-0.05em; }
p.subtitle { color:var(--text-muted); font-size:1.1rem; margin-top:0.5rem; }
main { max-width:1000px; width:90%; margin-bottom:4rem; }

/* Upload */
.upload-section { background:var(--glass); backdrop-filter:blur(12px); border:2px dashed #475569; border-radius:1.5rem; padding:3rem; text-align:center; transition:all 0.3s; cursor:pointer; margin-bottom:1.5rem; }
.upload-section:hover { border-color:var(--primary); background:rgba(99,102,241,0.05); transform:translateY(-2px); }
.upload-section.dragover { border-color:var(--accent); background:rgba(16,185,129,0.1); }
.upload-icon { font-size:3rem; margin-bottom:1rem; display:block; }

/* Comparison */
.comparison-container { position:relative; width:100%; max-width:800px; margin:1.5rem auto; aspect-ratio:4/3; border-radius:1rem; overflow:hidden; box-shadow:0 25px 50px -12px rgba(0,0,0,0.5); background:var(--bg-card); display:none; user-select:none; }
.image-after,.image-before { position:absolute; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; }
.image-before { clip-path:inset(0 50% 0 0); }
.slider-handle { position:absolute; top:0; bottom:0; left:50%; width:4px; background:white; cursor:ew-resize; z-index:10; box-shadow:0 0 15px rgba(0,0,0,0.5); }
.slider-handle::after { content:'↔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; background:white; color:var(--bg-dark); display:flex; align-items:center; justify-content:center; border-radius:50%; font-weight:bold; border:3px solid var(--primary); }

/* Loading */
.loading-overlay { position:absolute; inset:0; background:var(--glass); z-index:20; display:none; flex-direction:column; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.spinner { width:50px; height:50px; border:5px solid rgba(255,255,255,0.1); border-top:5px solid var(--primary); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.progress-text { margin-top:1rem; font-weight:500; }

/* Progress & Params UI */
.progress-container { width: 80%; max-width: 400px; height: 8px; background: rgba(255,255,255,0.1); border-radius: 10px; margin-top: 1rem; overflow: hidden; display: none; }
.progress-bar-fill { height: 100%; width: 0%; background: var(--primary); transition: width 0.3s ease; box-shadow: 0 0 10px var(--primary); }
.params-hint { margin-top: 1rem; font-size: 0.8rem; color: var(--text-muted); text-align: center; line-height: 1.6; display: none; }
.params-hint span { color: var(--accent); font-family: monospace; }

/* Demo Sections */
.demo-section {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.section-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.section-header h4 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.section-header p {
    color: var(--text-muted);
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Multi-image Cards */
/* Slanted Strip Grid (Premium Look) */
.sample-grid-3 {
    display: flex;
    height: 120px;
    width: 100%;
    overflow: hidden;
    background: var(--bg-dark);
}
.sample-grid-3 .strip {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
    transform: skewX(-15deg);
    margin: 0 -10px; /* Overlap */
    border-right: 2px solid var(--bg-dark);
    transition: flex 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}
.sample-grid-3 .strip:first-child { transform: skewX(-15deg) translateX(-15px); }
.sample-grid-3 .strip:last-child { border-right: none; transform: skewX(-15deg) translateX(15px); }

.sample-grid-3 .strip img {
    width: 150%; /* Cover the skew gap */
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) skewX(15deg); /* Counter-skew the image */
    transition: all 0.3s;
    filter: grayscale(0.2);
}
.sample-grid-3 .strip:hover {
    flex: 1.6;
    z-index: 10;
}
.sample-grid-3 .strip:hover img {
    filter: brightness(1.2) grayscale(0);
    transform: translateX(-50%) skewX(15deg) scale(1.1);
}

/* Feature Bar */
.feature-bar { display:flex; justify-content:center; gap:0.5rem; margin-top:1.5rem; background:var(--glass); backdrop-filter:blur(12px); padding:0.6rem; border-radius:1rem; border:1px solid rgba(255,255,255,0.1); flex-wrap:wrap; }
.feature-btn { background:transparent; border:none; color:var(--text-muted); padding:0.55rem 1.1rem; border-radius:0.75rem; cursor:pointer; font-weight:500; transition:all 0.2s; font-size:0.9rem; white-space:nowrap; }
.feature-btn:hover { color:var(--text-main); background:rgba(255,255,255,0.05); }
.feature-btn.active { background:var(--primary); color:white; }

/* Dropdown */
.dropdown { position:relative; display:inline-block; }
.dropdown-content { display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:var(--bg-card); min-width:140px; box-shadow:0 8px 16px rgba(0,0,0,0.5); border-radius:0.75rem; overflow:visible; z-index:50; border:1px solid rgba(255,255,255,0.1); margin-bottom:4px; }
.dropdown-content::after { content:''; position:absolute; top:100%; left:0; width:100%; height:12px; background:transparent; }
.dropdown-content a { color:var(--text-muted); padding:0.75rem 1rem; text-decoration:none; display:block; font-size:0.85rem; transition:all 0.2s; }
.dropdown-content a:hover { background:var(--primary); color:white; }
.dropdown:hover .dropdown-content { display:block; }

/* Scale bar */
.scale-bar { display:flex; justify-content:center; align-items:center; gap:0.5rem; margin-top:0.75rem; animation:slideUp 0.2s ease-out; }
.scale-label { color:var(--text-muted); font-size:0.85rem; margin-right:0.25rem; }
.scale-btn { background:var(--bg-card); border:1px solid #475569; color:var(--text-muted); padding:0.4rem 0.9rem; border-radius:0.5rem; cursor:pointer; font-weight:600; transition:all 0.15s; }
.scale-btn:hover { border-color:var(--primary); color:var(--text-main); }
.scale-btn.active { background:var(--primary); border-color:var(--primary); color:white; }

/* Recommendation */
.recommendation-card { background:rgba(16,185,129,0.1); border:1px solid var(--accent); padding:0.75rem 1rem; border-radius:0.75rem; margin-top:1.5rem; display:flex; align-items:center; gap:0.75rem; color:var(--accent); font-size:0.9rem; animation:slideUp 0.3s ease-out; }
@keyframes slideUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* Action bar */
.action-bar { display:flex; justify-content:center; gap:1rem; margin-top:1.5rem; }
.btn { padding:0.75rem 1.5rem; border-radius:0.75rem; font-weight:600; cursor:pointer; transition:all 0.2s; border:none; text-decoration:none; font-size:0.9rem; }
.btn-primary { background:var(--primary); color:white; box-shadow:0 4px 6px -1px rgba(99,102,241,0.4); }
.btn-primary:hover { background:var(--primary-hover); transform:translateY(-1px); }
.btn-secondary { background:var(--bg-card); color:var(--text-muted); border:1px solid #475569; }
.btn-secondary:hover { border-color:var(--primary); color:var(--text-main); }

/* Samples */
.samples-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.5rem; margin-top:2rem; }
.sample-card { background:var(--bg-card); border-radius:0.75rem; overflow:hidden; cursor:pointer; transition:transform 0.2s; border:1px solid #334155; }
.sample-card:hover { transform:scale(1.05); border-color:var(--primary); }
.sample-card img { width:100%; height:120px; object-fit:cover; }
.sample-label { padding:0.5rem; text-align:center; font-size:0.8rem; color:var(--text-muted); }

@media(max-width:640px) { h1{font-size:2rem} .upload-section{padding:1.5rem} .feature-bar{gap:0.25rem;padding:0.4rem} .feature-btn{padding:0.4rem 0.6rem;font-size:0.8rem} }