@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');

:root { 
    --prm-light: #ec4899; 
    --prm-dark: #7e22ce;  
    --accent: #f97316;    
    --sec: #1e293b;       
    --text-muted: #64748b; 
    --bg: #fffbfb;        
    --white: #ffffff; 
    --border: #f1e2e4;    
    --gradient: linear-gradient(135deg, var(--prm-dark), var(--prm-light), var(--accent));
    --card-shadow: 0 20px 40px -10px rgba(236, 72, 153, 0.15); 
    --glow-shadow: 0 10px 25px -5px rgba(236, 72, 153, 0.4);
    --error-bg: rgba(239, 68, 68, 0.05);
}

[data-theme="dark"] {
    --bg: #0f1015; 
    --sec: #f8fafc; 
    --white: #181920; 
    --border: #2a2b36; 
    --text-muted: #94a3b8;
    --card-shadow: 0 20px 40px -10px rgba(0,0,0,0.6);
    --gradient: linear-gradient(135deg, #6b21a8, #db2777, #ea580c);
    --error-bg: rgba(239, 68, 68, 0.15);
}

body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--sec); margin: 0; padding: 0; overflow-x: hidden; scroll-behavior: smooth; transition: background 0.3s, color 0.3s; }

#toast { position: fixed; top: -50px; left: 50%; transform: translateX(-50%); background: var(--sec); color: var(--bg); padding: 12px 24px; border-radius: 12px; font-weight: 700; font-size: 14px; z-index: 9999; opacity: 0; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); box-shadow: 0 10px 20px rgba(0,0,0,0.15); pointer-events: none; text-align: center; white-space: nowrap; display: flex; align-items: center; gap: 8px;}
#toast.show { top: 30px; opacity: 1; }

.holiday-banner { background: var(--gradient); color: #fff; text-align: center; padding: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; transition: opacity 0.3s; user-select: none; display: flex; align-items: center; justify-content: center; gap: 8px;}
.holiday-banner:hover { opacity: 0.9; }

.navbar { background: rgba(var(--white), 0.9); backdrop-filter: blur(10px); padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1000; }
.logo { font-size: 22px; font-weight: 900; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none; display: flex; align-items: center; gap: 8px;}

.lang-bar { display: flex; gap: 8px; align-items: center; }
.l-btn { border: 1px solid var(--border); background: var(--bg); padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 800; transition: 0.3s; color: var(--text-muted); outline: none;}
.l-btn:hover { border-color: var(--prm-light); color: var(--sec);}
.l-btn.active { background: var(--prm-dark); color: #fff; border-color: var(--prm-dark); }

.theme-btn { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px; outline: none; transition: transform 0.2s, color 0.2s; color: var(--text-muted); display: flex; align-items: center; justify-content: center;}
.theme-btn:hover { transform: scale(1.1); color: var(--prm-light); }

.hero { text-align: center; padding: 50px 20px; background: radial-gradient(circle at top center, rgba(236, 72, 153, 0.12), var(--bg) 70%); }
.hero h1 { font-size: 42px; font-weight: 900; margin-bottom: 15px; letter-spacing: -1px; line-height: 1.1; color: var(--sec); display: flex; align-items: center; justify-content: center; gap: 12px;}
.hero p { font-size: 18px; color: var(--text-muted); max-width: 600px; margin: 0 auto 30px; line-height: 1.6; }

.generator-section { padding: 20px 20px 60px; background: var(--bg); }
.main-layout { display: flex; gap: 24px; max-width: 1000px; margin: 0 auto; align-items: flex-start; justify-content: center; transition: all 0.5s ease; }

footer { background: var(--white); padding: 40px 20px; text-align: center; border-top: 1px solid var(--border); }
.legal-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;}
.legal-link { color: var(--prm-dark); font-size: 13px; cursor: pointer; font-weight: 600; }

#scroll-top-btn { position: fixed; bottom: 90px; right: 30px; background: var(--prm-dark); color: #fff; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 24px; opacity: 0; transition: 0.3s; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#scroll-top-btn.show { opacity: 1; }

@media (max-width: 900px) {
    .main-layout { flex-direction: column; align-items: center; }
}
@media (max-width: 600px) {
    .navbar { flex-direction: column; gap: 12px; }
    .hero h1 { font-size: 26px; }
}