/* --- 基础变量 --- */
:root {
    --bg-body: #F8FAFC; --bg-sidebar: #FFFFFF; --primary: #0F172A; --accent: #2563EB;
    --folder-color: #F59E0B; --text-main: #1E293B; --text-sub: #64748B; --border: #E2E8F0;
    --success: #10B981; --danger: #EF4444; --warning: #F59E0B;
    --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px;
}
* { margin:0; padding:0; box-sizing:border-box; font-family:'Plus Jakarta Sans',sans-serif; -webkit-tap-highlight-color:transparent; }
body { background:var(--bg-body); color:var(--text-main); display:flex; height:100vh; overflow:hidden; }

/* --- Toast 提示 --- */
#toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast { background: rgba(15, 23, 42, 0.95); color: white; padding: 12px 24px; border-radius: 50px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); animation: toastIn 0.3s ease; display: flex; align-items: center; gap: 10px; backdrop-filter: blur(5px); min-width: 180px; justify-content: center; }
@keyframes toastIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* --- Sidebar 侧边栏 --- */
.sidebar { width: 260px; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 24px; z-index: 100; }
.sidebar-header-group { flex-shrink: 0; }
.logo { display:flex; gap:12px; font-weight:700; font-size:20px; color:var(--primary); align-items:center; }
.logo-icon { width:36px; height:36px; background:var(--primary); color:white; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.menu { flex: 1; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; margin: 20px 0; }
.menu::-webkit-scrollbar { display: none; }
.menu-item { display:flex; gap:12px; padding:12px 16px; border-radius:var(--radius-md); color:var(--text-sub); cursor:pointer; font-weight:500; transition:0.2s; align-items:center; }
.menu-item:hover { background:#F1F5F9; color:var(--primary); }
.menu-item.active { background:#EFF6FF; color:var(--accent); font-weight:600; }
.menu-divider-line { height:1px; background:#E2E8F0; margin:5px 15px; flex-shrink:0; }
.storage-card { flex-shrink: 0; background: #F8FAFC; padding: 20px; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.storage-header { display:flex; justify-content:space-between; font-size:12px; font-weight:600; margin-bottom:10px; }
.progress-bg { height:8px; background:#E2E8F0; border-radius:10px; overflow:hidden; margin-bottom:12px; }
.progress-fill { height:100%; background:var(--primary); border-radius:10px; }
.btn-upgrade { width:100%; border:none; background: linear-gradient(135deg, #4F46E5 0%, #2563EB 100%); color:white; padding:10px; font-weight:600; border-radius:8px; cursor:pointer; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2); transition: 0.2s; }
.btn-upgrade:hover { transform: translateY(-1px); box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3); }

/* --- 主内容区域 --- */
.main-container { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.top-header { height:80px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; flex-shrink:0; }
.header-left { display:flex; gap:15px; align-items:center; }
.page-title h1 { font-size:24px; font-weight:700; color:var(--primary); }
.header-actions { display:flex; gap:15px; align-items:center; }
.search-bar { background:white; padding:10px 16px; border-radius:50px; display:flex; gap:10px; width:280px; box-shadow:var(--shadow-sm); border:1px solid transparent; }
.search-bar input { border:none; width:100%; outline:none; }
.btn-primary { background:var(--primary); color:white; border:none; padding:10px 24px; border-radius:50px; font-weight:600; cursor:pointer; display:flex; gap:8px; align-items:center; transition:0.2s; }
.btn-secondary { background:white; border:1px solid var(--border); padding:10px 20px; border-radius:50px; font-weight:600; cursor:pointer; display:flex; gap:8px; align-items:center; transition:0.2s; }
.btn-secondary:hover { background: #F8FAFC; border-color: #CBD5E1; }
.user-profile-area { display:flex; align-items:center; gap:12px; cursor:pointer; }
.avatar img { width:40px; height:40px; border-radius:50%; border:2px solid white; box-shadow:var(--shadow-sm); }
.user-badge-tag.vip { font-size:10px; font-weight:800; padding:3px 10px; border-radius:20px; background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%); color: #78350F; box-shadow: 0 2px 5px rgba(245, 158, 11, 0.3); text-transform: uppercase; letter-spacing: 0.5px; }

/* --- 文件列表内容 --- */
.content-area { flex:1; overflow-y:auto; padding:20px 40px 0 40px; }
.main-storage-status { background:white; border:1px solid var(--border); border-radius:16px; padding:20px 24px; margin-bottom:25px; display:flex; flex-direction: column; gap:12px; box-shadow:var(--shadow-sm); }
.storage-info-row { display: flex; justify-content: space-between; align-items: center; }
.storage-text { font-size:15px; color:var(--text-sub); display:flex; align-items:center; gap:8px; }
.storage-text strong { color:var(--text-main); font-weight: 700; color:var(--accent); }
.storage-visual { width:100%; height:10px; background:#E2E8F0; border-radius:10px; overflow:hidden; }
.visual-fill { height:100%; background: linear-gradient(90deg, #2563EB 0%, #60A5FA 100%); border-radius:10px; }

.filter-bar { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-chip { padding: 8px 16px; border-radius: 50px; border: 1px solid var(--border); background: white; font-size: 13px; font-weight: 600; color: var(--text-sub); cursor: pointer; white-space: nowrap; transition: 0.2s; display: flex; align-items: center; gap: 6px; flex-shrink:0; }
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15); }

.breadcrumb-bar { display:flex; gap:10px; margin-bottom:15px; font-size:14px; font-weight:500; color:var(--text-sub); }
.breadcrumb-item.active { color:var(--text-main); font-weight:700; }
.file-list-header { display:flex; justify-content:space-between; margin-bottom:15px; font-size:13px; color:var(--text-sub); font-weight:600; text-transform: uppercase; letter-spacing: 0.5px; }
.file-item { background:white; padding:16px 24px; margin-bottom:10px; border-radius:var(--radius-lg); display:flex; align-items:center; box-shadow:var(--shadow-sm); border:1px solid transparent; cursor:pointer; user-select:none; transition: all 0.2s; }
.file-item:hover, .file-item.context-active { border-color:var(--accent); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1); transform:translateY(-2px); }
.folder-row { background:#FFFEF9; border-color:#FEF3C7; }
.icon-folder { color:var(--folder-color); font-size:24px; margin-right:16px; }
.file-main { flex:1; display:flex; align-items:center; }
.file-name { font-size:14px; font-weight:600; margin-left:16px; color: var(--text-main); }
.file-icon-sm { font-size:22px; color:var(--text-sub); width:24px; text-align:center; }
.file-meta { font-size:13px; color:var(--text-sub); width:150px; text-align:right; font-feature-settings: "tnum"; }

/* --- 弹窗与面板 (PC端默认) --- */
.modal-backdrop { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(15,23,42,0.6); backdrop-filter:blur(5px); z-index:2000; align-items:center; justify-content:center; }
.modal-panel { background:white; width:500px; padding:30px; border-radius:24px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; max-height: 90vh; overflow-y: auto; }
.modal-panel.plan-panel { width: 1000px; max-width: 95vw; background: #F8FAFC; padding: 40px; }
.plan-header { text-align: center; margin-bottom: 30px; }
.plan-header h2 { font-size: 28px; color: var(--primary); margin-bottom: 8px; }
.plan-header p { color: var(--text-sub); font-size: 15px; }

/* PC使用Grid布局 */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; padding-bottom: 20px; }
.plan-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid var(--border); position: relative; display: flex; flex-direction: column; transition: 0.3s; }
.plan-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-color: var(--accent); }
.plan-card.current { border: 2px solid var(--accent); background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%); order: -1; }
.current-badge { position: absolute; top: 15px; right: 15px; background: var(--accent); color: white; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.plan-card.vip-plus { border-color: #F59E0B; background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%); }
.plan-name { font-size: 18px; font-weight: 700; color: var(--text-main); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.plan-price { font-size: 32px; font-weight: 800; color: var(--primary); margin-bottom: 20px; letter-spacing: -1px; }
.plan-price span { font-size: 14px; font-weight: 500; color: var(--text-sub); }
.feature-list { list-style: none; margin-bottom: 30px; flex: 1; }
.feature-item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 14px; color: var(--text-main); }
.feature-item i.check { color: var(--success); font-size: 16px; background: #DCFCE7; padding: 4px; border-radius: 50%; }
.feature-item i.cross { color: var(--danger); font-size: 16px; background: #FEE2E2; padding: 4px; border-radius: 50%; opacity: 0.7; }
.feature-item.dim { color: var(--text-sub); text-decoration: line-through; opacity: 0.6; }
.btn-plan { width: 100%; padding: 14px; border-radius: 12px; font-weight: 700; cursor: pointer; text-align: center; border: none; font-size: 15px; transition: 0.2s; }
.btn-plan.manage { background: #E0E7FF; color: var(--accent); }
.btn-plan.manage:hover { background: #C7D2FE; }
.btn-plan.upgrade { background: var(--primary); color: white; }
.btn-plan.upgrade:hover { opacity: 0.9; }
.close-btn-abs { position: absolute; top: 20px; right: 20px; font-size: 24px; cursor: pointer; color: var(--text-sub); z-index: 10; }
.modal-panel.small-panel { width: 400px; padding: 24px; }
.upload-zone { border:2px dashed #CBD5E1; border-radius:16px; padding:60px; text-align:center; color:var(--text-sub); background: #F8FAFC; transition: 0.2s; cursor: pointer; }
.upload-zone:hover { border-color: var(--accent); background: #EFF6FF; }
.modal-header { display:flex; justify-content:space-between; margin-bottom:20px; font-size:18px; font-weight:bold; }
.close-btn { cursor:pointer; color:#999; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.btn-text { border: none; background: none; color: var(--text-sub); cursor: pointer; font-weight: 600; padding: 10px 15px; }
.settings-container { max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.setting-card { background:white; padding:20px; border-radius:16px; border:1px solid var(--border); }
.setting-card h3 { font-size:16px; margin-bottom:15px; display:flex; gap:10px; align-items:center; }
.form-group { margin-bottom:15px; }
.form-group label { display:block; font-size:12px; font-weight:600; margin-bottom:5px; }
.form-input { width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; outline:none; }
.context-menu { position:absolute; display:none; z-index:999; background:white; width:220px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.15); border:1px solid var(--border); padding:8px 0; }
.menu-option { padding:10px 20px; font-size:14px; cursor:pointer; display:flex; align-items:center; gap:10px; color:var(--text-main); }
.menu-option:hover { background:#F1F5F9; color:var(--primary); }
.menu-option i { width:18px; text-align:center; color:var(--text-sub); }
.menu-option:hover i { color:var(--primary); }
.menu-option.highlight { color:var(--accent); font-weight:600; }
.menu-option.highlight i { color:var(--accent); }
.menu-option.delete { color:#EF4444; }
.menu-option.delete i { color:#EF4444; }
.menu-divider { height:1px; background:var(--border); margin:5px 0; }
.mobile-bottom-nav, .mobile-action-sheet, .btn-menu-toggle, .sidebar-overlay, .btn-close-sidebar { display:none; }

/* --- 移动端适配 (Media Query) --- */
@media screen and (max-width: 768px) {
    body { flex-direction:column; }
    .sidebar { position:fixed; top:0; left:-100%; width:280px; height:100dvh; transition:left 0.3s; box-shadow:10px 0 30px rgba(0,0,0,0.1); z-index:1000; padding-bottom:24px; }
    .sidebar.show { left:0; }
    .sidebar-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(15,23,42,0.4); backdrop-filter:blur(8px); z-index:999; }
    .sidebar-overlay.show { display:block; }
    .btn-close-sidebar { display:flex; position:absolute; top:20px; right:20px; border:none; background:none; font-size:24px; color:#94A3B8; z-index:1001; }
    .top-header { padding:10px 20px; position:sticky; top:0; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); z-index:50; }
    .btn-menu-toggle { display:flex; width:40px; height:40px; border:1px solid var(--border); border-radius:10px; align-items:center; justify-content:center; background:white; margin-right:15px; }
    .desktop-only, .search-bar, .file-meta { display:none; }
    
    /* 内容区域修复 */
    .content-area { padding:15px 15px 180px 15px; }
    .main-storage-status { padding: 12px; margin-bottom: 15px; }

    /* [关键优化] 会员弹窗 - 居中且有滑动提示 */
    .modal-panel.plan-panel {
        /* 取消底部固定，使用 margin: auto 配合 flex 父级居中 */
        position: relative !important;
        bottom: auto !important;
        margin: auto !important;
        
        /* 宽度调整，留出一点边距 */
        width: 85% !important; 
        max-width: 340px; 
        
        /* 完美圆角 */
        border-radius: 24px !important; 
        
        /* 关键：去掉左右 padding，让轮播图可以划到边缘 */
        padding: 25px 0 30px 0; 
        background: #F8FAFC;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .plan-header { padding: 0 20px; margin-bottom: 15px; }
    .plan-header h2 { font-size: 20px; }

    /* 滚动容器 */
    .plan-grid-wrapper { 
        width: 100%;
        overflow-x: auto; 
        /* 给上下留空间显示阴影 */
        padding: 10px 0 25px 0; 
        scrollbar-width: none; 
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch; 
    }
    .plan-grid-wrapper::-webkit-scrollbar { display: none; }
    
    /* 轮播布局 */
    .plan-grid { 
        display: flex !important; 
        gap: 15px; /* 卡片间距 */
        padding: 0 20px; /* 容器左右内边距，为了让第一张图不贴边 */
        scroll-snap-type: x mandatory; /* 强制吸附 */
        width: max-content;
        margin: 0;
    }
    /* 去掉之前的补丁 */
    .plan-grid::after { display: none; }
    
    /* 单个卡片适配 - 关键点：宽度设为 75vw */
    .plan-grid .plan-card { 
        min-width: 250px;
        /* 这样设置会让右边露出下一张卡片的一角，提示可滑动 */
        width: 75vw !important; 
        max-width: 280px; 
        
        border-radius: 20px;
        scroll-snap-align: center; /* 停下时居中 */
        flex-shrink: 0;
        margin: 0;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    }
    
    /* 关闭按钮微调 */
    .close-btn-abs {
        top: 15px; right: 15px; 
        z-index: 20;
        background: rgba(0,0,0,0.05);
        width: 30px; height: 30px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }

    /* 底部导航与操作面板 */
    .mobile-bottom-nav { display:flex; position:fixed; bottom:0; width:100%; background:white; height:70px; align-items:center; justify-content:space-around; border-top:1px solid var(--border); z-index:90; padding-bottom:15px; }
    .nav-item { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10px; color:#94A3B8; }
    .nav-item.active { color:var(--accent); }
    .center-item .plus-circle { width:50px; height:50px; background:var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; transform:translateY(-20px); box-shadow:0 8px 20px rgba(15,23,42,0.3); }
    .mobile-action-sheet { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:2000; align-items:flex-end; }
    .sheet-overlay { position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.5); backdrop-filter:blur(2px); }
    .sheet-content { background:#F2F2F7; width:100%; border-radius:20px 20px 0 0; z-index:2001; animation:slideUp 0.3s; overflow:hidden; padding-bottom:30px; }
    .sheet-header { padding:15px; background:white; border-bottom:1px solid #ddd; display:flex; justify-content:space-between; color:#666; font-weight:600; }
    .sheet-row { padding:16px; background:white; border-bottom:1px solid #eee; display:flex; gap:15px; align-items:center; font-size:16px; color:var(--primary); }
    .sheet-row:active { background:#f5f5f5; }
    .sheet-row.highlight { color:var(--accent); font-weight:600; }
    .sheet-row.delete { color:#EF4444; }
    .sheet-cancel { padding:16px; background:white; text-align:center; font-weight:bold; color:var(--primary); margin:10px; border-radius:12px; }
}

@keyframes popUp { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }