/* =========================== */
/* 赛博朋克2077官网风格覆盖 */
/* 参考: https://www.cyberpunk.net */
/* =========================== */

/* 导入字体 */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');

/* 更新CSS变量为CP2077配色 */
:root {
    /* CP2077主色 - 黄色 */
    --cp-yellow: #fcee0a !important;
    --cp-yellow-dark: #d4c007 !important;
    
    /* 背景色 */
    --bg-primary: #000000 !important;
    --bg-secondary: #0a0a0a !important;
    --bg-tertiary: #141414 !important;
    
    /* 强调色 */
    --neon-cyan: #00f0ff !important;
    --neon-pink: #ff0080 !important;
    --neon-red: #ff003c !important;
    
    /* 文本色 */
    --text-primary: #f0f0f0 !important;
    --text-secondary: #b0b0b0 !important;
    --text-muted: #707070 !important;
    
    /* 发光效果 */
    --glow-yellow: 0 0 10px var(--cp-yellow), 0 0 20px var(--cp-yellow), 0 0 40px var(--cp-yellow) !important;
    --glow-cyan: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan) !important;
    --glow-pink: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink) !important;
    --glow-red: 0 0 10px var(--neon-red), 0 0 20px var(--neon-red) !important;
    
    /* 边框 */
    --border-yellow: 2px solid var(--cp-yellow) !important;
    --border-cyan: 1px solid var(--neon-cyan) !important;
    --border-neon: 1px solid var(--cp-yellow) !important;
    
    /* 字体 */
    --font-title: 'Rajdhani', sans-serif !important;
    --font-body: 'Rajdhani', 'PingFang SC', Arial, sans-serif !important;
}

/* 故障效果动画 */
@keyframes glitchTop {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-2px, -2px); }
    40% { transform: translate(2px, 2px); }
    60% { transform: translate(-2px, 2px); }
    80% { transform: translate(2px, -2px); }
}

@keyframes glitchBottom {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(3px, 0); }
    50% { transform: translate(-3px, 0); }
    75% { transform: translate(3px, 0); }
}

/* Logo故障效果 */
.logo {
    position: relative !important;
}

.logo::before {
    content: 'CYBER-CAMPUS' !important;
    position: absolute !important;
    left: 2px !important;
    top: 0 !important;
    color: var(--neon-cyan) !important;
    opacity: 0.7 !important;
    animation: glitchTop 2s infinite !important;
}

.logo::after {
    content: 'CYBER-CAMPUS' !important;
    position: absolute !important;
    left: -2px !important;
    top: 0 !important;
    color: var(--neon-pink) !important;
    opacity: 0.7 !important;
    animation: glitchBottom 3s infinite !important;
}

/* 按钮CP2077风格 */
button, .btn, .user-actions button {
    background: transparent !important;
    border: 2px solid var(--cp-yellow) !important;
    border-radius: 0 !important;
    color: var(--cp-yellow) !important;
    font-family: var(--font-title) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

button::before, .btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--cp-yellow) !important;
    transition: left 0.3s ease !important;
    z-index: -1 !important;
}

button:hover::before, .btn:hover::before {
    left: 0 !important;
}

button:hover, .btn:hover {
    color: var(--bg-primary) !important;
    box-shadow: var(--glow-yellow) !important;
}

/* 卡片CP2077风格 */
.post-card, .section, .modal-content, .settings-container {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--cp-yellow) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 20px rgba(252, 238, 10, 0.1) !important;
    position: relative !important;
}

.post-card::before, .section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--cp-yellow), transparent) !important;
    animation: borderScan 3s linear infinite !important;
}

@keyframes borderScan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.post-card:hover {
    box-shadow: var(--glow-yellow) !important;
    transform: translateY(-3px) !important;
}

/* 标题CP2077风格 */
.post-title, .detail-title, .profile-username, .section-title {
    color: var(--cp-yellow) !important;
    font-family: var(--font-title) !important;
    text-shadow: 0 0 10px var(--cp-yellow) !important;
    font-weight: 700 !important;
}

/* 头像发光 */
.avatar, .user-avatar, .author-avatar, .profile-avatar, .comment-avatar {
    border: 2px solid var(--cp-yellow) !important;
    box-shadow: 0 0 15px rgba(252, 238, 10, 0.5) !important;
}

/* 交互元素 */
.interaction:hover, .interaction-item:hover {
    color: var(--cp-yellow) !important;
    text-shadow: var(--glow-yellow) !important;
}

/* 标签 */
.tag, .category-btn, .tab {
    background: transparent !important;
    border: 1px solid var(--cp-yellow) !important;
    border-radius: 0 !important;
    color: var(--cp-yellow) !important;
    position: relative !important;
}

.category-btn.active, .tab.active {
    background: var(--cp-yellow) !important;
    color: var(--bg-primary) !important;
    box-shadow: var(--glow-yellow) !important;
}

/* 输入框 */
input, textarea, select {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--cp-yellow) !important;
    border-radius: 0 !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--cp-yellow) !important;
    box-shadow: var(--glow-yellow) !important;
    outline: none !important;
}

/* 滚动条CP2077风格 */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--cp-yellow) !important;
    border-radius: 0 !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cp-yellow-dark) !important;
    box-shadow: var(--glow-yellow) !important;
}

/* 顶部导航栏 */
header {
    background: var(--bg-primary) !important;
    border-bottom: var(--border-yellow) !important;
    box-shadow: 0 4px 20px rgba(252, 238, 10, 0.2) !important;
}

/* 类别栏 */
.top-categories {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid rgba(252, 238, 10, 0.3) !important;
}

/* 特殊按钮 */
.edit-btn {
    background: transparent !important;
    border: 2px solid var(--neon-cyan) !important;
    color: var(--neon-cyan) !important;
}

.edit-btn:hover {
    background: var(--neon-cyan) !important;
    color: var(--bg-primary) !important;
    box-shadow: var(--glow-cyan) !important;
}

.delete-btn, .delete-post-btn {
    background: transparent !important;
    border: 2px solid var(--neon-red) !important;
    color: var(--neon-red) !important;
}

.delete-btn:hover, .delete-post-btn:hover {
    background: var(--neon-red) !important;
    color: var(--bg-primary) !important;
    box-shadow: var(--glow-red) !important;
}

.follow-btn {
    background: transparent !important;
    border: 2px solid var(--neon-pink) !important;
    color: var(--neon-pink) !important;
}

.follow-btn:hover {
    background: var(--neon-pink) !important;
    color: var(--bg-primary) !important;
    box-shadow: var(--glow-pink) !important;
}

/* 页脚 */
footer {
    background: var(--bg-primary) !important;
    border-top: var(--border-yellow) !important;
    color: var(--text-secondary) !important;
}

/* 修复user-profile卡顿 - 使用GPU加速 */
.profile-header, .posts-section, .post-card, .posts-grid {
    will-change: transform !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
}

/* 优化滚动性能 */
.container, .posts-grid {
    contain: layout style paint !important;
}

.post-card {
    contain: layout style paint !important;
    content-visibility: auto !important;
}

/* 性能优化 */
* {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 设置页面特殊处理 - 保持原有样式 */
.settings-container .form-input,
.settings-container input,
.settings-container textarea,
.settings-container select {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--cp-yellow) !important;
    border-radius: 0.5rem !important;
    color: var(--text-primary) !important;
}

.settings-container .upload-btn,
.settings-container .btn-primary,
.settings-container .btn-secondary,
.settings-container .btn-danger {
    border-radius: 0.5rem !important;
}

.settings-header {
    background: var(--bg-primary) !important;
    border-bottom: var(--border-yellow) !important;
}

.settings-tabs {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid rgba(252, 238, 10, 0.3) !important;
}

.settings-tab {
    color: var(--text-secondary) !important;
}

.settings-tab.active {
    color: var(--cp-yellow) !important;
    border-bottom-color: var(--cp-yellow) !important;
    background: var(--bg-primary) !important;
}