* {

    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Segoe UI', "Microsoft YaHei", sans-serif;
}


body {
    background-image: url('/static/background.jpg');
    background-size: cover; background-position: center; background-attachment: fixed;
    min-height: 100vh; display: flex; justify-content: center; align-items: center;
    padding: 20px;
}

/* 毛玻璃卡片主体 */
.glass-container {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    padding: 35px 40px; width: 100%; max-width: 550px;
}

.header-section { text-align: center; margin-bottom: 25px; }

.avatar {
    width: 80px; height: 80px; border-radius: 50%;
    border: 4px solid white; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 10px; image-rendering: pixelated; 
}

h2 { font-size: 1.15rem; line-height: 1.6; font-weight: 600; color: #3d3d3d; }

/* 状态横幅 & 呼吸灯 */
.status-banner {
    display: inline-flex; align-items: center;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 117, 151, 0.3);
    padding: 6px 16px; border-radius: 20px; margin-top: 10px;
}
.status-dot {
    width: 10px; height: 10px; background-color: #ff5c83;
    border-radius: 50%; margin-right: 10px;
    animation: breathe 2s infinite ease-in-out;
}
@keyframes breathe {
    0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(255, 92, 131, 0.7); }
    50% { transform: scale(1.1); box-shadow: 0 0 10px 3px rgba(255, 92, 131, 0.4); }
    100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(255, 92, 131, 0); }
}
.status-text { font-size: 0.8rem; color: #444; }
.status-highlight { color: #ff5c83; font-weight: bold; margin-right: 4px; }

/* 近期掉落橱窗 (横向滚动) */
.recent-drops { margin-bottom: 25px; }
.gallery-title { font-size: 0.85rem; font-weight: bold; color: #555; margin-bottom: 8px; }
.gallery {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px;
    scrollbar-width: thin; /* Firefox */
}
.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-thumb { background: rgba(255, 117, 151, 0.5); border-radius: 3px; }
.gallery-item {
    min-width: 140px; height: 90px; border-radius: 12px;
    display: flex; justify-content: center; align-items: center;
    color: white; font-weight: bold; font-size: 0.9rem; text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); flex-shrink: 0; cursor: pointer;
    transition: transform 0.3s;
}
.gallery-item:hover { transform: scale(1.05); }

/* 表单输入区域 */
.input-group { margin-bottom: 18px; }
label { display: block; margin-bottom: 6px; font-size: 0.9rem; font-weight: bold; color: #4a4a4a; }
.optional-tag { font-size: 0.75rem; color: #888; font-weight: normal; margin-left: 5px; }

/* 快捷Tag */
.quick-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tag {
    background: rgba(255, 117, 151, 0.1); color: #ff5c83;
    padding: 4px 10px; border-radius: 15px; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; border: 1px solid rgba(255, 117, 151, 0.3); transition: all 0.2s;
}
.tag:hover { background: #ff5c83; color: white; transform: translateY(-1px); }

input, textarea, select {
    width: 100%; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px; background: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem; color: #333; outline: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
input:focus, textarea:focus, select:focus {
    background: rgba(255, 255, 255, 0.95); border-color: #ff7597;
    box-shadow: 0 0 12px rgba(255, 117, 151, 0.35); transform: scale(1.01);
}

.flex-row { display: flex; gap: 15px; margin-bottom: 18px; }
.flex-item { flex: 1; }

/* 提交按钮 & 动画 */
.submit-btn {
    width: 100%; padding: 14px; background-color: #ff7597; color: white;
    border: none; border-radius: 12px; font-size: 1.1rem; font-weight: bold;
    cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(255, 117, 151, 0.4);
    margin-top: 10px;
}
.submit-btn:hover { background-color: #ff5c83; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 117, 151, 0.6); }
.submit-btn.loading { background-color: #ccc; cursor: not-allowed; transform: none; box-shadow: none; }

/* 底部引流区 */
.social-footer { margin-top: 25px; text-align: center; border-top: 1px dashed rgba(0,0,0,0.1); padding-top: 15px; }
.social-link {
    color: #555; text-decoration: none; font-weight: 600; font-size: 0.9rem;
    transition: color 0.3s;
}
.social-link:hover { color: #0096fa; /* Pixiv蓝 */ text-shadow: 0 0 8px rgba(0, 150, 250, 0.3); }


/* ================= 樱花飘落特效 ================= */
.sakura-container {
    position: fixed;
    top: 0; left: 0; 
    width: 100vw; height: 100vh;
    pointer-events: none; /* 关键：让鼠标可以直接穿透樱花点击下方的表单 */
    z-index: 9999;        /* 让樱花飘在最顶层 */
    overflow: hidden;
}

.sakura {
    position: absolute;
    top: -20%; /* 【新增】默认让它躲在屏幕最上方的视线死角 */
    background-color: #ffb7c5; 
    border-radius: 15px 0 15px 0; 
    opacity: 0; /* 【修改】起跑前保持完全透明 */
    box-shadow: 0 0 5px rgba(255, 183, 197, 0.4);
    
    /* 增加 forwards 让动画状态更好地衔接 */
    animation: fall linear infinite, sway ease-in-out infinite alternate;
    animation-fill-mode: backwards; /* 【核心修复】让它在延迟等待时，强制保持 0% 时的隐身状态 */
}

@keyframes fall {
    0% { top: -10%; opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 110%; opacity: 0; }
}

@keyframes sway {
    0% { transform: translateX(0px) rotate(0deg); }
    100% { transform: translateX(25px) rotate(45deg); }
}