/* vaporift/assets/css/vaporwave.css */

/* ===== CSS 变量 ===== */
:root {
    --pink: #FF6EC7;
    --cyan: #00D4FF;
    --purple: #C471ED;
    --deep: #1A0030;
    --deep-light: #2d1b4e;
    --surface: rgba(255, 110, 199, 0.08);
    --border: rgba(255, 110, 199, 0.2);
    --text: #e0d8f0;
    --text-dim: #9888b0;
}

/* ===== 基础 ===== */
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; }
.vapor-bg { background: var(--deep); }
.bg-deep\/80 { background: rgba(26, 0, 48, 0.85); }
.text-pink { color: var(--pink); }
.text-cyan { color: var(--cyan); }
.text-purple { color: var(--purple); }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.border-pink\/20 { border-color: var(--border); }
.bg-pink\/20 { background: rgba(255, 110, 199, 0.2); }
.backdrop-blur { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.transition-colors { transition: color 0.2s, background 0.2s; }
.no-underline { text-decoration: none; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 12px; }

/* ===== Logo 渐变文字 ===== */
.vapor-text {
    background: linear-gradient(90deg, var(--pink), var(--cyan), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== 卡片 ===== */
.vapor-card {
    background: rgba(26, 0, 48, 0.6);
    border: 1px solid var(--border);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}
.vapor-card:hover {
    border-color: rgba(255, 110, 199, 0.4);
    box-shadow: 0 0 20px rgba(255, 110, 199, 0.1);
}

/* ===== 输入框 ===== */
.vapor-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.vapor-input:focus {
    border-color: var(--pink);
    box-shadow: 0 0 12px rgba(255, 110, 199, 0.2);
}
.vapor-input::placeholder { color: #555; }

/* ===== 按钮 ===== */
.vapor-btn {
    background: linear-gradient(135deg, var(--pink), var(--purple));
    border: none;
    border-radius: 8px;
    padding: 11px 24px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
}
.vapor-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(255, 110, 199, 0.35);
}
.vapor-btn:active { transform: scale(0.98); }

/* ===== 入口卡片按钮 ===== */
.hub-card {
    background: rgba(26, 0, 48, 0.5);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    display: block;
}
.hub-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 110, 199, 0.15);
}
.hub-card .icon { font-size: 2.2rem; margin-bottom: 6px; }
.hub-card .label { color: var(--text); font-size: 0.9rem; font-weight: 500; }

/* ===== 时间线 ===== */
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--pink), var(--cyan), var(--purple));
}
.timeline-item { position: relative; margin-bottom: 28px; }
.timeline-item::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pink);
    border: 2px solid var(--deep);
}

/* ===== 荣誉榜卡片 ===== */
.honor-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
}
.honor-card:hover { border-color: rgba(255, 110, 199, 0.4); transform: translateY(-2px); }

/* ===== 聊天 ===== */
.chat-container { display: flex; flex-direction: column; height: calc(100vh - 64px); }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
    word-break: break-word;
}
.chat-bubble.left {
    align-self: flex-start;
    background: rgba(255, 110, 199, 0.15);
    border-bottom-left-radius: 4px;
}
.chat-bubble.right {
    align-self: flex-end;
    background: rgba(0, 212, 255, 0.15);
    border-bottom-right-radius: 4px;
}
.chat-input-bar { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }

/* ===== 帖子列表 ===== */
.post-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s;
}
.post-card:hover { border-color: rgba(255, 110, 199, 0.4); }
.post-card.pinned { border-left: 3px solid var(--pink); }

/* ===== 特效层 ===== */
.fx-scanlines {
    position: fixed; inset: 0; z-index: 9999; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px);
}
.fx-vhs {
    position: fixed; inset: 0; z-index: 9998; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 3px, transparent 3px, transparent 6px);
    animation: vhs-shift 8s infinite;
}
@keyframes vhs-shift {
    0%, 100% { transform: translateY(0); }
    5% { transform: translateY(-15px); }
    10% { transform: translateY(0); }
    50% { transform: translateY(0); }
    55% { transform: translateY(10px); }
    60% { transform: translateY(0); }
}
canvas#fx-particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

/* ===== 霓虹发光 ===== */
.fx-neon-active h1, .fx-neon-active h2, .fx-neon-active .vapor-text,
.fx-neon-active .vapor-card { animation: neon-pulse 2s ease-in-out infinite; }
@keyframes neon-pulse {
    0%, 100% { text-shadow: 0 0 7px var(--pink), 0 0 20px var(--pink), 0 0 40px var(--cyan); }
    50% { text-shadow: 0 0 4px var(--pink), 0 0 10px var(--pink), 0 0 20px var(--cyan); }
}

/* ===== Glitch ===== */
.fx-glitch-active .glitch-target { animation: glitch 3s infinite; }
@keyframes glitch {
    0%, 100% { transform: translate(0); }
    2% { transform: translate(-2px, 1px); }
    4% { transform: translate(2px, -1px); }
    6% { transform: translate(0); }
}

/* ===== 渐变流动 ===== */
.fx-gradient-active .vapor-bg {
    background: linear-gradient(135deg, var(--deep), #2d1b4e, #1a0030, #2d0044);
    background-size: 400% 400%;
    animation: gradient-morph 15s ease infinite;
}
@keyframes gradient-morph {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== 主题：暗黑赛博 ===== */
.theme-cyberpunk { --deep: #0a0a0f; --deep-light: #111122; --pink: #ff00ff; --cyan: #00ffff; --purple: #7000ff; }
.theme-cyberpunk .vapor-card { border-color: rgba(0, 255, 255, 0.2); }
.theme-cyberpunk .vapor-btn { background: linear-gradient(135deg, #ff00ff, #00ffff); }

/* ===== 主题：轻量现代 ===== */
.theme-light { --deep: #f8f5ff; --deep-light: #ede4ff; --pink: #7c3aed; --cyan: #06b6d4; --purple: #a855f7; --text: #1e1b4b; --text-dim: #6b7280; --surface: rgba(124, 58, 237, 0.06); --border: rgba(124, 58, 237, 0.15); }
.theme-light body { color: var(--text); }
.theme-light .vapor-input { color: var(--text); background: rgba(124, 58, 237, 0.04); }
.theme-light .text-gray-400 { color: #6b7280; }
.theme-light .text-gray-500 { color: #9ca3af; }

/* ===== 工具类 ===== */
.hidden { display: none !important; }
.max-w-5xl { max-width: 1024px; }
.mx-auto { margin-left: auto; margin-right: auto; }