/*
 Copyright (c) 2026 Ashraf Morningstar
 These are personal recreations of existing projects, developed by Ashraf Morningstar
 for learning and skill development.
 Original project concepts remain the intellectual property of their respective creators.
 Repository: https://github.com/AshrafMorningstar
*/

/*
 * Premium UI Design by Ashraf Morningstar
 * GitHub: https://github.com/AshrafMorningstar
 * Theme: Forest Emerald
 */

:root {
    --primary: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --secondary: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    --accent: #10b981;
    --bg-gradient: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    --text-color: #d1fae5;
    --card-bg: rgba(255, 255, 255, 0.95);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.25);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-gradient);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* PREMIUM BACKGROUND EFFECTS */
.background-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: float 20s ease-in-out infinite;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: var(--primary);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 350px;
    height: 350px;
    background: var(--secondary);
    bottom: -100px;
    right: -100px;
    animation-delay: 7s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: #10b981;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 14s;
}

/* MAIN CONTAINER */
.container {
    position: relative;
    z-index: 1;
    max-width: 900px;
    width: 95%;
    margin: 2rem auto;
    animation: slideInUp 0.8s ease-out;
}

/* HEADER STYLING */
.app-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.header-content {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
}

.header-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 3s infinite;
}

.title {
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, var(--text-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 20px rgba(255,255,255,0.3);
}

.subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    opacity: 0.95;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.theme-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    transition: all 0.3s ease;
}

.theme-indicator:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255,255,255,0.4);
}

.theme-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    animation: pulse 2s ease-in-out infinite;
}

/* MAIN CONTENT AREA */
.app-main {
    background: var(--card-bg);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
    animation: scaleIn 0.6s ease-out 0.2s both;
}

.app-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary);
}

/* PREMIUM FORM ELEMENTS */
.input-group {
    margin-bottom: 1.5rem;
}

.input-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1f2937;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

input, select, textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background: #f9fafb;
    color: #1f2937;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #10b981;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}

/* PREMIUM BUTTONS */
button, .btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
}

button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

button:hover::before {
    width: 300px;
    height: 300px;
}

button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

button:active {
    transform: translateY(-1px);
}

/* RESULT DISPLAY */
.result {
    margin-top: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 16px;
    border-left: 5px solid #10b981;
    animation: slideInUp 0.5s ease-out;
}

.result h3 {
    color: #1f2937;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.result p {
    color: #4b5563;
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

.result strong {
    color: #10b981;
    font-weight: 700;
}

/* FOOTER */
.app-footer {
    margin-top: 2rem;
    padding: 1.5rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.creator-badge {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.badge-icon {
    font-size: 1.2rem;
    animation: pulse 2s ease-in-out infinite;
}

.creator-badge a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    position: relative;
}

.creator-badge a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--text-color);
    transition: width 0.3s ease;
}

.creator-badge a:hover::after {
    width: 100%;
}

.github-star {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.github-star:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .container {
        width: 98%;
        margin: 1rem auto;
    }
    
    .app-main {
        padding: 1.5rem;
    }
    
    .header-content {
        padding: 2rem 1.5rem;
    }
    
    .title {
        font-size: 2rem;
    }
    
    button {
        width: 100%;
    }
}

/* ANIMATIONS */

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes neonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}