:root{
  --primary-gradient: linear-gradient(135deg, #09b7a9 0%, #764ba2 100%);
  --dark-bg:#0a0e27; --darker-bg:#050714;
  --card-bg:rgba(17,24,54,.6);
  --card-border:rgba(255,255,255,.08);
  --glass-bg:rgba(255,255,255,.05);
  --glass-border:rgba(255,255,255,.1);
  --text-primary:#fff; --text-secondary:#a0aec0; --text-muted:#718096;
  --accent-purple:#667eea; --accent-pink:#f093fb; --accent-blue:#4facfe;
  --success:#48bb78; --warning:#ed8936; --error:#f56565;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--dark-bg); color:var(--text-primary); min-height:100vh; overflow-x:hidden;
}
.hidden{display:none !important}

/* BG flair */
body::before{
  content:''; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 20% 80%, rgba(102,126,234,.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(240,147,251,.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(79,172,254,.1) 0%, transparent 50%);
  animation:bgShift 20s ease infinite;
}
@keyframes bgShift{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.1)}}
@keyframes fadeInUp{from{opacity:0; transform:translateY(30px)}to{opacity:1; transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Logo + logout */
.logo-container{position:fixed; top:20px; left:20px; z-index:1000}
.logo{width:150px; filter:brightness(0) invert(1)}
#logout-btn{
  position:fixed; top:20px; right:20px; z-index:1000;
  padding:10px 16px; border-radius:12px; border:1px solid rgba(245,101,101,.3);
  background:rgba(245,101,101,.1); color:var(--error); font-weight:600; cursor:pointer;
}

/* Auth */
#auth-section{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(135deg, var(--darker-bg), var(--dark-bg));
}
.auth-container{
  width:100%; max-width:480px; padding:48px; border-radius:24px;
  background:var(--card-bg); border:1px solid var(--card-border);
  backdrop-filter:blur(20px); box-shadow:0 24px 48px rgba(0,0,0,.4); animation:fadeInUp .6s ease;
}
.auth-logo{ text-align:center; margin-bottom:24px }
.auth-logo-circle{
  width:100px;height:100px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:var(--primary-gradient); font-size:2rem; box-shadow:0 10px 30px rgba(102,126,234,.3); animation:pulse 2s infinite;
}
.auth-title{ font-size:2rem; font-weight:800; margin-bottom:8px }
.auth-subtitle{ color:var(--text-secondary) }

.form-group{ margin:18px 0 }
.form-group label{ display:block; margin-bottom:8px; font-weight:600; font-size:.9rem }
.form-group input{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--glass-border);
  background:var(--glass-bg); color:var(--text-primary)
}
.form-group input:focus{ outline:none; border-color:var(--accent-purple) }

.auth-btn{
  width:100%; padding:14px; border-radius:12px; border:none; cursor:pointer;
  background:var(--primary-gradient); color:#fff; font-weight:700; margin-top:8px
}
.auth-link{ text-align:center; margin-top:16px; color:var(--text-secondary) }
.auth-link a{ color:var(--accent-purple); text-decoration:none; font-weight:600 }

#auth-message{
  margin-top:14px; text-align:center; padding:10px; border-radius:10px; min-height:20px;
  border:1px solid transparent
}
#auth-message.success{ border-color:rgba(102,126,234,.2); color:var(--accent-purple); background:rgba(102,126,234,.1) }
#auth-message.error{ border-color:rgba(245,101,101,.2); color:var(--error); background:rgba(245,101,101,.1) }

/* App */
.main-content{ padding-bottom:60px }
.hero-section{ padding:90px 20px 50px }
.hero-container{ max-width:1200px; margin:0 auto }
.hero-header{ text-align:center; margin-bottom:40px; animation:fadeInUp .6s ease }
.hero-title{
  font-size: clamp(2rem, 6vw, 4rem); font-weight:800; margin-bottom:14px;
  background:linear-gradient(135deg, #667eea, #f093fb, #4facfe);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-subtitle{ color:var(--text-secondary) }

        /* Language Pills with Flags */
        .language-showcase {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 48px;
            flex-wrap: wrap;
            animation: slideInFromLeft 1s ease;
        }

        .language-pill {
            padding: 12px 24px;
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.95rem;
            color: var(--text-primary);
            transition: all 0.3s ease;
        }

        .language-pill:hover {
            background: rgba(102, 126, 234, 0.1);
            border-color: var(--accent-purple);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
        }

        .language-flag {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255, 255, 255, 0.2);
        }


.user-info{ max-width:900px; margin:0 auto 30px; padding:16px 20px; border:1px solid var(--glass-border); border-radius:16px; background:var(--glass-bg); text-align:center }
#user-email-display{ color:var(--accent-purple); font-weight:700 }

.content-container{ max-width:900px; margin:0 auto; padding:0 20px }
.generator-card{
  padding:32px; border-radius:24px; background:var(--card-bg); border:1px solid var(--card-border);
  box-shadow:0 24px 48px rgba(0,0,0,.2)
}
.card-title{ font-size:1.6rem; font-weight:800; margin-bottom:8px }
.card-description{ color:var(--text-secondary) }
.muted{ color:var(--text-secondary) }

.template-section{
  margin-top:16px; margin-bottom:22px; border-radius:16px; padding:18px;
  background:rgba(102,126,234,.05); border:1px solid rgba(102,126,234,.2)
}
.template-header{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
.template-icon{ width:40px;height:40px;border-radius:10px; display:grid; place-items:center; background:var(--primary-gradient) }
.template-title{ font-weight:700 }
.download-template-btn{
  margin-top:12px; padding:10px 16px; border-radius:12px; border:none; cursor:pointer;
  background:var(--primary-gradient); color:#fff; font-weight:700
}

.example-section{ border-radius:16px; padding:18px; background:var(--glass-bg); border:1px solid var(--glass-border); margin-bottom:18px }
.example-header{ color:var(--accent-purple); font-weight:700; margin-bottom:8px }
.example-content{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.9rem; color:var(--text-secondary) }

.warning-box{ border-radius:12px; padding:14px; background:rgba(237,137,54,.08); border:1px solid rgba(237,137,54,.3); margin-bottom:22px }
.warning-header{ color:var(--warning); font-weight:700; margin-bottom:6px }

.input-options{ display:flex; gap:14px; margin-bottom:14px }
.input-option{ flex:1; position:relative }
.input-option input[type=radio]{ position:absolute; opacity:0 }
.input-option label{
  display:block; padding:12px; border-radius:12px; text-align:center; cursor:pointer;
  background:var(--glass-bg); border:2px solid var(--glass-border); font-weight:600
}
.input-option input[type=radio]:checked + label{
  color:#fff; background:var(--primary-gradient); border-color:transparent; transform:translateY(-1px)
}

#text-input{
  width:100%; min-height:200px; padding:14px; border-radius:12px;
  background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-primary); resize:vertical
}
#text-input:focus{ outline:none; border-color:var(--accent-purple) }
#file-input{ display:block; width:100%; padding:12px; border:1px dashed var(--glass-border); border-radius:12px; background:var(--glass-bg); color:var(--text-secondary) }

#generate-btn{
  margin-top:20px; width:100%; padding:16px; border:none; border-radius:16px; cursor:pointer;
  background:var(--primary-gradient); color:#fff; font-weight:800; letter-spacing:.5px
}

/* Loading */
#loading-section{ min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px }
.spinner{ width:120px;height:120px;margin:0 auto 24px; position:relative }
.spinner-circle{ position:absolute; inset:0; border:3px solid transparent; border-top-color:var(--accent-purple); border-radius:50%; animation:spin 1s linear infinite }
.spinner-circle:nth-child(2){ inset:10%; border-top-color:var(--accent-pink); animation-duration:.8s; animation-direction:reverse }
.spinner-circle:nth-child(3){ inset:20%; border-top-color:var(--accent-blue); animation-duration:.6s }

/* Result */
#result-section{ padding:30px 20px 80px }
.result-container{ max-width:1200px; margin:0 auto; animation:fadeInUp .6s ease }
.result-card{ padding:32px; border-radius:24px; background:var(--card-bg); border:1px solid var(--card-border) }
.result-header{ text-align:center; margin-bottom:18px }
.result-icon{ width:90px;height:90px;border-radius:50%; display:grid; place-items:center; margin:0 auto 12px; background:var(--primary-gradient); box-shadow:0 10px 30px rgba(102,126,234,.3) }
.result-title{ font-size:2rem; font-weight:800; }
.result-subtitle{ color:var(--text-secondary) }

.action-buttons{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:16px }
.action-btn{ padding:14px 22px; border-radius:12px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none }
.primary-btn{ background:var(--primary-gradient); color:#fff }
.secondary-btn{ background:var(--glass-bg); color:var(--text-primary); border:1px solid var(--glass-border) }

/* Footer */
.powered-by{ background:#111; border-top:1px solid rgba(255,255,255,.06); padding:12px 16px }
.powered-by__wrap{ max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:10px }
.powered-by span{ color:rgba(255,255,255,.85) }
.powered-by__logo{ height:22px; display:block }

/* Responsive */
@media (max-width:768px){
  .auth-container,.generator-card{ padding:24px }
  .logo-container{ position:static; text-align:center; margin:10px 0 }
  #logout-btn{ top:auto; bottom:20px; right:20px }
  .action-buttons{ flex-direction:column }
  .action-btn{ width:100% }
}