/* CSS Variables */
:root {
    --background: 280 10% 6%;
    --foreground: 280 20% 96%;
    --card: 280 10% 8%;
    --card-foreground: 280 20% 96%;
    --popover: 280 12% 10%;
    --popover-foreground: 280 20% 96%;
    --primary: 330 85% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 340 90% 65%;
    --secondary-foreground: 0 0% 100%;
    --muted: 280 10% 15%;
    --muted-foreground: 0 0% 92%;
    --accent: 330 85% 60%;
    --accent-foreground: 280 10% 6%;
    --success: 142 76% 42%;
    --success-foreground: 0 0% 100%;
    --destructive: 0 70% 55%;
    --destructive-foreground: 280 20% 96%;
    --border: 280 15% 18%;
    --input: 280 15% 18%;
    --ring: 330 85% 60%;
    --radius: 1rem;
    --glass-bg: 280 10% 12%;
    --glass-border: 280 30% 25%;
    --glow-pink: 330 85% 60%;
    --glow-magenta: 340 90% 65%;
    --gradient-primary: linear-gradient(135deg, hsl(330 85% 60%), hsl(340 90% 65%));
    --gradient-deep-red: linear-gradient(135deg, hsl(355 70% 45%), hsl(0 75% 50%));
    --gradient-glow: radial-gradient(ellipse at 50% 0%, hsl(330 85% 60% / .2), transparent 60%), radial-gradient(ellipse at 85% 30%, hsl(340 90% 65% / .15), transparent 50%), radial-gradient(ellipse at 15% 70%, hsl(320 80% 58% / .15), transparent 50%), radial-gradient(circle at 50% 100%, hsl(330 70% 55% / .1), transparent 60%);
    --shadow-glow: 0 0 40px hsl(330 85% 60% / .4);
    --shadow-deep-red: 0 0 35px hsl(355 70% 45% / .35), 0 4px 18px hsl(0 75% 50% / .25);
    --shadow-glass: 0 8px 32px hsl(280 10% 4% / .4);
    --transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);
}

/* Body Styles */
body {
    background-color: hsl(var(--background));
    font-family: Inter, system-ui, sans-serif;
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    background-image: var(--gradient-glow);
    background-attachment: fixed;
}

/* Gate Styles */
#gate {
    background-color: hsl(var(--background));
    background-image: var(--gradient-glow);
}

.gate-card {
    background-color: hsl(var(--glass-bg) / 0.72);
    border-color: hsl(var(--border));
    box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.gate-title {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gate-subtitle {
    color: hsl(var(--muted-foreground));
}

#gateInput {
    background-color: hsl(var(--input));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}

#gateBtn {
    background: var(--gradient-primary);
    transition: var(--transition-smooth);
}

/* Main Header */
.main-title {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.main-subtitle {
    color: hsl(var(--muted-foreground));
}

/* Panel Styles */
.main-panel {
    background-color: hsl(var(--glass-bg) / 0.72);
    border-color: hsl(var(--border));
    box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* Conditional visibility */
.hidden {
    display: none !important;
}

.section-label {
    color: hsl(var(--card-foreground));
}

/* Pill Styles */
.pill {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground) / 0.7);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    /* Prevent any layout shifts */
    transform: none;
    margin: 0;
    border-width: 0;
}

.pill:hover {
    background-color: hsl(var(--muted) / 1.1) !important;
    color: hsl(var(--foreground)) !important;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px hsl(var(--ring) / 0.25);
    /* No transforms or size changes */
    transform: none;
}

.pill.active {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    box-shadow: var(--shadow-glow), 0 0 0 2px hsl(var(--ring) / 0.55) !important;
    /* No transforms or size changes */
    transform: none;
}

/* Input Styles */
.main-panel input[type="text"],
.main-panel input[id$="Input"] {
    background-color: hsl(var(--input));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
    transition: var(--transition-smooth);
}

.main-panel input:focus {
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 4px hsl(var(--ring) / 0.15) !important;
}

/* Submit Button - Deep Red Style */
#submitBtn {
    background: var(--gradient-deep-red);
    box-shadow: var(--shadow-deep-red), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
    transition: filter 0.3s ease, box-shadow 0.3s ease;
    /* Prevent any layout shifts */
    transform: none;
}

#submitBtn:hover {
    filter: brightness(1.12) saturate(1.1);
    box-shadow: var(--shadow-deep-red),
                0 0 45px hsl(355 70% 45% / .45),
                inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

#submitBtn:active {
    /* Only visual feedback, no movement */
    filter: brightness(0.9);
    transform: none;
}

#submitBtn:disabled {
    filter: grayscale(0.5) opacity(0.55);
    box-shadow: none;
    cursor: not-allowed;
}

/* Footer Note */
#footerNote {
    color: hsl(var(--muted-foreground));
}

/* Toast Animations and Styles */
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast {
    animation: slide-in 0.22s ease both;
    width: 100%;
    max-width: min(360px, calc(100vw - 2rem));
    border-radius: 10px;
    background: hsl(var(--success));
    color: hsl(var(--success-foreground));
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    box-shadow: 0 10px 30px hsl(var(--success) / 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    pointer-events: auto;
    font-size: 13px;
    word-break: break-word;
}

.toast.error {
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    box-shadow: 0 10px 30px hsl(var(--destructive) / 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.toast .icon {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.toast .title {
    font-weight: 700;
    font-size: 13px;
}

.toast .desc {
    font-size: 12px;
    opacity: 0.95;
}

/* Mobile toast adjustments */
@media (max-width: 640px) {
    .toast {
        font-size: 12px;
        padding: 12px 14px;
        max-width: calc(100vw - 2rem);
    }

    .toast .title {
        font-size: 12px;
        line-height: 1.3;
    }

    .toast .desc {
        font-size: 11px;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Remove panel background and reduce padding on mobile */
    .main-panel {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Reduce page padding on mobile */
    #page {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Section spacing adjustments */
    .main-panel > div[class*="mb-8"] {
        margin-bottom: 1.5rem !important;
    }

    /* Pills two-column layout on mobile with less rounding */
    .pills {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.625rem !important;
    }

    .pill {
        width: 100% !important;
        border-radius: 10px !important;
        padding: 14px 12px !important;
        font-size: 14px !important;
    }

    /* Submit button adjustments */
    #submitBtn {
        border-radius: 10px !important;
        height: 52px !important;
        font-size: 16px !important;
    }

    /* Input adjustments */
    .main-panel input[type="text"] {
        border-radius: 10px !important;
        height: 48px !important;
        font-size: 16px !important;
    }

    /* Section labels */
    .section-label {
        font-size: 15px !important;
        margin-bottom: 0.5rem !important;
    }


    /* Header adjustments */
    .main-title {
        font-size: 2.5rem !important;
    }

    .main-subtitle {
        font-size: 0.875rem !important;
    }

    /* Footer note */
    #footerNote {
        font-size: 12px !important;
        margin-top: 0.75rem !important;
    }
}