:root {
    --primary: #1a3a2a; 
    --accent: #D4AF37;  
}

body {
    font-family: 'Noto Sans Bengali', sans-serif;
    background-color: #f3f4f6;
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 24px 24px;
}

.title-font {
    font-family: 'Playfair Display', serif;
}

.custom-shadow {
    box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1);
}

.image-preview-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 4px solid var(--accent);
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* Premium Backgrounds */
.bg-theme-1 { 
    background: radial-gradient(circle at 50% 0%, #205035 0%, #0a1711 100%);
    position: relative;
}
.bg-theme-1::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0L40 20L20 40L0 20z' fill='%23D4AF37' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
    z-index: 0;
}

.bg-theme-2 { 
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, #fdf5e6 100%);
    border: 8px solid #D4AF37;
}

.bg-theme-3 { 
    background: radial-gradient(circle at top left, #f5d76e 0%, #b8860b 100%);
    box-shadow: inset 0 0 60px rgba(0,0,0,0.3);
}

.bg-theme-4 { 
    background: radial-gradient(circle at top right, #1e3a8a 0%, #020617 100%);
    position: relative;
}
.bg-theme-4::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#ffffff 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.1;
    z-index: 0;
}

/* Glassmorphism Designation Badge */
.glass-badge-dark {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #D4AF37;
}

.glass-badge-light {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #1a3a2a;
}

.poster-wrapper {
    aspect-ratio: 4 / 5;
    max-width: 450px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .image-preview-circle {
        width: 110px;
        height: 110px;
    }
    .poster-wrapper {
        aspect-ratio: auto;
        min-height: 500px;
    }
}