/* * HFUT-ACG-Cloud 响应式视觉方案
 * 电脑端背景：img/bg.webp
 * 手机端背景：img/bg_mobile.jpg
 */

:root {
    --primaryColor: #f89d9d;
    --accentColor: #ffb7b7;
    --borderRadius: 12px;
}

/* --- 1. 响应式背景穿透层 --- */
html, body, #app, #login {
    background-color: transparent !important;
    height: 100%;
    margin: 0;
}

body {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* 默认配置：电脑端 (宽度 > 768px) */
@media screen and (min-width: 769px) {
    body {
        background-image: url('img/bg.webp') !important;
    }
}

/* 移动端适配：手机端 (宽度 <= 768px) */
@media screen and (max-width: 768px) {
    body {
        background-image: url('img/bg_mobile.jpg') !important;
    }
    
    /* 手机端登录框宽度优化 */
    #login form {
        max-width: 85% !important;
        padding: 2em !important;
    }
}

/* 增加底层滤镜，防止背景干扰内容 */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 250, 250, 0.05); 
    z-index: -2;
    pointer-events: none;
}

/* --- 2. 左侧侧边栏：深度磨砂效果 --- */
.sidebar {
    background-color: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-right: 1px solid rgba(248, 157, 157, 0.2) !important;
}

.sidebar a, .sidebar i { color: #444 !important; }

.sidebar a.active {
    background-color: rgba(248, 157, 157, 0.25) !important;
    color: var(--primaryColor) !important;
    border-left: 6px solid var(--primaryColor) !important;
}

/* --- 3. 登录页面重塑 --- */
#login {
    background-color: transparent !important;
}

#login form {
    background-color: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(12px);
    max-width: 440px;
    width: 90%;
    border-radius: 20px;
    border: 2px solid var(--primaryColor);
    box-shadow: 0 15px 35px rgba(248, 157, 157, 0.3);
    padding: 3em !important;
}

/* --- 4. 全局粉色化 (去蓝逻辑) --- */
.bar .fill, .button, .button--main {
    background-color: var(--primaryColor) !important;
}

header, .search {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(5px);
}

header i, header button, .search i {
    color: var(--primaryColor) !important;
}

/* --- 5. 文件列表：增强文字可视性 --- */
.item {
    background-color: rgba(255, 255, 255, 0.75) !important;
    border-radius: var(--borderRadius) !important;
}

.item:hover {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--primaryColor);
}

.item .name {
    color: #333 !important;
    text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.9);
    font-weight: 500 !important;
}