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

body {
    font-family: 'Arial', 'Microsoft YaHei', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow-x: hidden;
}

/* 星空背景 */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow:
        100px 100px white, 200px 150px white, 300px 50px white,
        400px 200px white, 500px 100px white, 600px 250px white,
        700px 150px white, 800px 50px white, 900px 200px white,
        1000px 100px white, 50px 300px white, 150px 350px white,
        250px 400px white, 350px 450px white, 450px 500px white,
        550px 350px white, 650px 400px white, 750px 450px white;
    animation: twinkle 3s infinite;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

.container {
    max-width: 900px;
    width: 90%;
    padding: 20px;
}

.title {
    text-align: center;
    color: white;
    font-size: 3em;
    margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {

    0%,
    100% {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 255, 255, 0.5);
    }

    50% {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.8);
    }
}

/* 登录界面 */
.login-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
    min-width: 350px;
}

.login-card h2 {
    color: #667eea;
    margin-bottom: 10px;
}

.login-card p {
    color: #666;
    margin-bottom: 20px;
}

.login-card input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
    margin-bottom: 20px;
    transition: border-color 0.3s;
}

.login-card input:focus {
    outline: none;
    border-color: #667eea;
}

/* 主界面 */
.welcome-text {
    text-align: center;
    color: white;
    font-size: 1.3em;
    margin-bottom: 30px;
    position: relative;
}

.btn-logout {
    margin-left: 15px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid white;
    color: white;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-logout:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 许愿池 */
.well-container {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.well {
    position: relative;
    width: 400px;
    height: 400px;
    background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 10px 30px rgba(0, 0, 0, 0.5),
        0 10px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.water {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(180deg, #3498db 0%, #2980b9 100%);
    border-radius: 50%;
    animation: wave 3s ease-in-out infinite;
}

@keyframes wave {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.well-edge {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    height: 40px;
    background: linear-gradient(180deg, #7f8c8d 0%, #95a5a6 100%);
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 愿望显示 */
.wishes-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    overflow: hidden;
    z-index: 10;
}

.wish-bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 15px;
    font-size: 12px;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: float 4s ease-in-out infinite;
    max-width: 150px;
    word-wrap: break-word;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) rotate(2deg);
    }

    75% {
        transform: translateY(-5px) rotate(-2deg);
    }
}

/* 操作区域 */
.actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.wish-input-section,
.random-section {
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.wish-input-section textarea {
    width: 100%;
    height: 100px;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    resize: none;
    margin-bottom: 10px;
    font-family: inherit;
}

.wish-input-section textarea:focus {
    outline: none;
    border-color: #667eea;
}

.random-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.random-result {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    min-height: 60px;
    width: 100%;
    text-align: center;
    color: #333;
    font-style: italic;
}

/* 按钮样式 */
.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.btn-secondary {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 87, 108, 0.6);
}

/* 统计信息 */
.stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.stat-item {
    text-align: center;
}

.stat-label {
    color: #666;
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
}

.stat-value {
    color: #667eea;
    font-size: 28px;
    font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .title {
        font-size: 2em;
    }

    .well {
        width: 300px;
        height: 300px;
    }

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

    .stats {
        flex-direction: column;
        gap: 15px;
    }
}