/* Custom styles */
.form-group {
    margin-bottom: 1.5rem;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

button {
    transition: all 0.2s ease-in-out;
}

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

button:active {
    transform: translateY(0);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#result {
    animation: fadeIn 0.3s ease-out;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    .grid {
        grid-template-columns: 1fr;
    }
}

/* 星空背景动画 */
@keyframes move-twinkle {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -10000px 5000px;
    }
}

.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 0;
}

.twinkling {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    animation: move-twinkle 200s linear infinite;
    z-index: 1;
}

/* 新拟态设计风格 */
.neo-select {
    @apply bg-white border border-gray-300 text-gray-900 p-2 rounded-lg;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    transition: all 0.2s ease;
}

.neo-select:hover {
    @apply border-blue-500;
}

.neo-select:focus {
    @apply outline-none ring-2 ring-blue-500/50 border-blue-500;
}

.neo-button {
    @apply px-4 py-2 bg-gray-800/50 backdrop-blur-md border border-gray-700 text-gray-300 rounded-lg;
    transition: all 0.2s ease;
}

.neo-button:hover {
    @apply border-blue-500/50 text-blue-400 transform -translate-y-0.5;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.neo-button:active {
    @apply transform translate-y-0;
}

.neo-button-primary {
    @apply px-4 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg font-medium;
    transition: all 0.2s ease;
}

.neo-button-primary:hover {
    @apply transform -translate-y-0.5;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.neo-button-primary:active {
    @apply transform translate-y-0;
}

/* 统计卡片 */
.stat-card {
    @apply p-4 bg-gray-800/30 rounded-lg border border-gray-700;
    transition: all 0.2s ease;
}

.stat-card:hover {
    @apply border-blue-500/30;
    transform: translateY(-2px);
}

/* 效果标签 */
#effects>div {
    @apply p-2 rounded-md text-sm font-medium;
    transition: all 0.2s ease;
}

#effects>div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media (max-width: 640px) {
    .container {
        @apply px-4;
    }

    h1 {
        @apply text-xl;
    }

    .grid {
        @apply grid-cols-1;
    }

    .stat-card {
        @apply p-3;
    }
}