:root{
  --primary-color:#2563eb;
  --primary-hover:#1d4ed8;
  --secondary-color:#64748b;
  --secondary-hover:#475569;
  --danger-color:#dc2626;
  --danger-hover:#b91c1c;
  --success-color:#16a34a;
  --bg-primary:#ffffff;
  --bg-secondary:#f8fafc;
  --bg-tertiary:#f1f5f9;
  --text-primary:#1e293b;
  --text-secondary:#64748b;
  --text-muted:#94a3b8;
  --border-color:#e2e8f0;
  --border-hover:#cbd5e1;
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --border-radius:8px;
}

/* 暗黑主题变量 */
@media (prefers-color-scheme: dark){
  :root{
    --bg-primary:#18181b;
    --bg-secondary:#09090b;
    --bg-tertiary:#0b0b0f;
    --text-primary:#fafafa;
    --text-secondary:#e4e4e7;
    --text-muted:#a1a1aa;
    --border-color:#27272a;
    --border-hover:#3f3f46;
    --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.6);
    --shadow-md:0 6px 10px -2px rgb(0 0 0 / 0.6), 0 3px 6px -3px rgb(0 0 0 / 0.6);
  }
}

/* 手动暗黑模式覆盖（通过 data-theme=dark 强制）*/
[data-theme="dark"]{
  --bg-primary:#18181b;
  --bg-secondary:#09090b;
  --bg-tertiary:#0b0b0f;
  --text-primary:#fafafa;
  --text-secondary:#e4e4e7;
  --text-muted:#a1a1aa;
  --border-color:#27272a;
  --border-hover:#3f3f46;
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.6);
  --shadow-md:0 6px 10px -2px rgb(0 0 0 / 0.6), 0 3px 6px -3px rgb(0 0 0 / 0.6);
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  margin:0;
  background:var(--bg-secondary);
  min-height:100vh;
  color:var(--text-primary);
}

/* 背景画布固定在底层 */
#bg-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none;}

.container{
  max-width:1400px;
  width:95vw;
  margin:24px auto;
  padding:24px 20px;
  background:var(--bg-primary);
  border:1px solid var(--border-color);
  border-radius:var(--border-radius);
  box-shadow:var(--shadow-md);
}

h1{
  font-size:2.2em;
  color:var(--text-primary);
  margin:0 0 24px 0;
  font-weight:700;
  text-align:center;
}

#breadcrumb{
  margin-bottom:28px;
  padding:12px 16px;
  background:var(--bg-tertiary);
  border-radius:var(--border-radius);
  border:1px solid var(--border-color);
}

#breadcrumb a{
  color:var(--primary-color);
  text-decoration:none;
  font-weight:600;
  padding:4px 8px;
  border-radius:6px;
  transition:all 0.2s ease;
}

#breadcrumb a:hover{
  background:var(--bg-primary);
  color:var(--primary-hover);
}

#breadcrumb span{
  color:var(--text-muted);
  margin:0 8px;
}

.op-bar{
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  gap:20px;
  margin-bottom:28px;
  padding:18px 20px;
  background:var(--bg-tertiary);
  border-radius:var(--border-radius);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-sm);
}

.op-left,.op-right{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  min-height:44px;
  flex:1 1 0;
  min-width:0;
}
.op-left{flex-direction:column;align-items:flex-start;gap:10px;}
.op-left-top{display:flex;align-items:center;gap:12px;width:100%;}
.op-left-actions{display:flex;align-items:center;gap:12px;}
.op-right{margin-left:0;flex-direction:column;align-items:flex-start;gap:10px;}
/* 顶部一行：搜索框 + 右上角排序 */
.op-top{display:flex;align-items:center;gap:12px;width:100%;}
.op-top #search-input{flex:1 1 auto;}
.op-top #sort-select{margin-left:auto;}
/* 第二行操作区域：排序、视图切换、主题、返回 */
.op-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
/* 主题按钮不占用自动间距 */
#theme-toggle{margin-left:0;}

.op-bar .upload-btn,.op-bar button,.op-bar select,.op-bar input[type="text"]{
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  border-radius:var(--border-radius);
  transition:all 0.2s ease;
}
.op-bar .upload-btn,.op-bar button{padding:0 18px;font-weight:600;}
.op-bar input[type="text"]{
  height:44px;
  padding:0 16px;
}

/* 表单内联样式优化 */
#mkdir-form{
  display:inline-flex;
  gap:10px;
  align-items:center;
}

/* 输入框宽度优化 */
#mkdir-input{width:clamp(160px,20vw,280px);} 
#search-input{width:clamp(200px,25vw,320px);} 
#sort-select{
  width:110px;
  padding:0 12px;
  background:var(--bg-primary);
  border:1px solid var(--border-color);
  color:var(--text-primary);
} 

/* 响应式布局 */
@media (max-width: 900px){
  .op-bar{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    padding:16px;
  }
  .op-left,.op-right{
    justify-content:flex-start;
    gap:10px;
    width:100%;
  }
  .op-right{margin-left:0;}
  #theme-toggle{margin-left:0;}
  .op-right .view-toggle{margin-left:0;}
  #mkdir-input,#search-input{width:min(240px,100%);} 
  #sort-select{width:100px;}
}

@media (max-width: 600px){
  .op-left,.op-right{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .op-bar .upload-btn,.op-bar button,.op-bar input[type="text"],.op-bar select{
    width:100%;
    justify-content:center;
  }
  /* 行为：右侧控件换行并保持按钮组靠左 */
  .view-toggle{width:100%;}
  .op-right{order:2;}
  .op-left{order:1;}
  #mkdir-form{
    flex-direction:column;
    gap:8px;
    width:100%;
  }
  #mkdir-input{width:100%;}
}

.op-bar input[type="text"]{
  border-radius:var(--border-radius);
  border:1px solid var(--border-color);
  background:var(--bg-primary);
  font-size:1em;
  color:var(--text-primary);
  transition:all 0.2s ease;
  box-sizing:border-box;
}

.op-bar input[type="text"]:focus{
  outline:none;
  border-color:var(--primary-color);
  box-shadow:0 0 0 3px rgb(37 99 235 / 0.1);
}

.op-bar input[type="text"]::placeholder{
  color:var(--text-muted);
}

/* 统一按钮交互样式（使用全局 .btn 变体控制配色） */
.btn-primary{background:var(--primary-color);color:#fff;}
.btn-secondary{background:var(--secondary-color);color:#fff;}
.btn-light{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);}
.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow-md);} 
.btn-secondary:hover{background:var(--secondary-hover);box-shadow:var(--shadow-md);} 
.btn-light:hover{background:var(--bg-primary);border-color:var(--border-hover);box-shadow:var(--shadow-md);} 
.btn:active{transform:translateY(1px);} 

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:24px;
  margin-top:20px;
}

.grid-item{
  background:var(--bg-primary);
  border:1px solid var(--border-color);
  border-radius:var(--border-radius);
  padding:20px;
  text-align:center;
  cursor:pointer;
  transition:all 0.2s ease;
  position:relative;
  word-break:break-word;
  color:var(--text-primary);
}

.grid-item:hover{
  border-color:var(--border-hover);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

.grid-item svg{
  width:56px;
  height:56px;
  margin-bottom:12px;
  color:var(--primary-color);
}

.grid-item img{
  width:100%;
  height:100px;
  object-fit:cover;
  border-radius:var(--border-radius);
  margin-bottom:12px;
  box-shadow:var(--shadow-sm);
}

.grid-item .file-icon{
  font-size:3.5em;
  line-height:100px;
  height:100px;
  color:var(--text-secondary);
}

.delete-btn{
  position:absolute;
  top:8px;
  right:8px;
  background:var(--danger-color);
  color:white;
  border:none;
  border-radius:50%;
  width:28px;
  height:28px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:all 0.2s ease;
  font-size:1.2em;
  font-weight:bold;
  box-shadow:var(--shadow-sm);
}

.grid-item:hover .delete-btn{
  opacity:1;
}

.delete-btn:hover{
  background:var(--danger-hover);
  box-shadow:var(--shadow-md);
}

.copy-btn{ display:none; }

.size-badge{
  display:inline-block;
  margin-top:8px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  color:var(--primary-color);
  font-weight:700;
  font-size:0.95em;
  text-decoration:none;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
}

.size-badge:hover{
  background:var(--bg-primary);
  border-color:var(--primary-hover);
  color:var(--primary-hover);
  box-shadow:var(--shadow-md);
}

input[type="file"]{display:none;}

/* 选择器与搜索框细节 */
.op-bar select{
  outline:none;
}
.op-bar select:focus{
  border-color:var(--primary-color);
  box-shadow:0 0 0 3px rgb(37 99 235 / 0.1);
}

/* 上传进度条 */
#upload-progress{box-shadow:var(--shadow-sm);} 
#upload-progress-bar{transition:width .2s ease;}
#upload-progress-text{pointer-events:none;}

/* 拖拽上传蒙层 */
#drop-overlay{backdrop-filter:blur(1px);}

/* 视图切换按钮 */
.view-toggle{
  display:flex;
  border:1px solid var(--border-color);
  border-radius:var(--border-radius);
  overflow:hidden;
  background:var(--bg-primary);
}
.view-btn{
  border:none;
  background:var(--bg-primary);
  color:var(--text-secondary);
  padding:0 14px;
  height:44px;
  cursor:pointer;
  transition:all 0.2s ease;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
}
.view-btn:hover{
  background:var(--bg-tertiary);
  color:var(--text-primary);
}
.view-btn.active{
  background:var(--primary-color);
  color:#fff;
}
.view-btn:not(:last-child){
  border-right:1px solid var(--border-color);
}

/* 列表视图样式优化 */
.list-view .grid{
  display:block;
}
.list-view .grid-item{
  display:flex;
  align-items:center;
  padding:14px 20px;
  margin-bottom:4px;
  border-radius:var(--border-radius);
  cursor:pointer;
  transition:all 0.2s ease;
  position:relative;
  background:var(--bg-primary);
  border:1px solid transparent;
}
.list-view .grid-item:hover{
  transform:none;
  background:var(--bg-secondary);
  border-color:var(--border-color);
  box-shadow:var(--shadow-sm);
}
/* 列表视图图标和文件图标 */
.list-view .grid-item img,.list-view .grid-item .file-icon{
  width:40px;
  height:40px;
  margin-bottom:0;
  margin-right:14px;
  flex-shrink:0;
  border-radius:6px;
}
.list-view .grid-item .file-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
}
.list-view .grid-item svg{
  width:40px;
  height:40px;
  margin-bottom:0;
  margin-right:14px;
  flex-shrink:0;
}
/* 文件信息区域 */
.list-view .file-info{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  gap:16px;
}
.list-view .list-actions{display:flex;gap:8px;flex-shrink:0;}
.list-view .list-action-btn{
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  color:var(--text-primary);
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
  font-size:13px;
  transition:all .2s ease;
}
.list-view .list-action-btn:hover{
  background:var(--primary-color);
  border-color:var(--primary-color);
  color:#fff;
}
.list-view .file-name{
  font-weight:600;
  color:var(--text-primary);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:0;
  font-size:15px;
}
.list-view .size-badge{
  margin-top:0;
  margin-left:0;
  flex-shrink:0;
  font-size:13px;
  padding:4px 8px;
  border-radius:6px;
}
/* 列表视图删除按钮优化 */
.list-view .delete-btn{
  position:absolute;
  top:50%;
  right:16px;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:6px;
  font-size:14px;
  opacity:0;
  transition:all 0.2s ease;
  z-index:10;
  background:var(--danger-color);
  color:white;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-sm);
}
.list-view .grid-item:hover .delete-btn{
  opacity:1;
}
.list-view .delete-btn:hover{
  background:var(--danger-hover);
  box-shadow:var(--shadow-md);
  transform:translateY(-50%) scale(1.05);
}
/* 列表视图悬停时为删除按钮预留空间 */
.list-view .grid-item:hover .size-badge{
  margin-right:48px;
} 

#loading,#status{
  text-align:center;
  padding:40px;
  font-size:1.2em;
  color:var(--text-primary);
  background:var(--bg-tertiary);
  border-radius:var(--border-radius);
  border:1px solid var(--border-color);
  margin:20px 0;
}

#toast{
  position:fixed;
  top:24px;
  left:12px;
  z-index:2000;
  display:none;
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-left:4px solid var(--success-color);
  color:var(--success-color);
  padding:10px 14px;
  border-radius:10px;
  box-shadow:var(--shadow-md);
  text-align:center;
  min-width:280px;
}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:1800;}
.modal.show{display:flex;}
.modal-card{background:var(--bg-primary);border-radius:12px;box-shadow:var(--shadow-md);border:1px solid var(--border-color);}
.modal-header{padding:14px 18px;border-bottom:1px solid var(--border-color);font-weight:700;}
.modal-body{padding:16px 18px;color:var(--text-primary);}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--border-color);}
.btn{padding:10px 16px;border:none;border-radius:8px;cursor:pointer;font-weight:600;}
.btn-primary{background:var(--primary-color);color:#fff;}
.btn-secondary{background:var(--secondary-color);color:#fff;}
.btn-danger{background:var(--danger-color);color:#fff;}
.btn-light{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);}    
.btn, .upload-btn, .op-bar button{
  filter: none;
}
.btn:hover, .upload-btn:hover, .op-bar button:hover{
  opacity:1;
}

/* 让 .upload-btn 继承 .btn 行为并统一尺寸与圆角 */
.upload-btn{padding:12px 24px;border:none;border-radius:var(--border-radius);cursor:pointer;font-size:1em;font-weight:600;transition:all 0.2s ease;box-shadow:var(--shadow-sm);} 

.preview-modal .modal-card{width:min(96vw,1200px);height:min(92vh,800px);display:flex;flex-direction:column;}
.preview-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border-color);background:var(--bg-primary);} 
.preview-title{font-weight:700;}
.modal-close{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:50%;width:32px;height:32px;cursor:pointer;}
.preview-content{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);overflow:auto;position:relative;}
.preview-title{color:var(--text-primary);} 
.preview-content img,.preview-content video{max-width:100%;max-height:100%;border-radius:8px;}
.preview-footer{display:flex;gap:12px;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--border-color);background:var(--bg-primary);} 

#password-cover{
  position:fixed;
  z-index:100;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:var(--bg-secondary);
  display:flex;
  align-items:center;
  justify-content:center;
}

#password-box{
  background:var(--bg-primary);
  border:1px solid var(--border-color);
  padding:40px 50px;
  border-radius:var(--border-radius);
  box-shadow:var(--shadow-md);
  text-align:center;
  animation:fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

#password-box h2{
  margin:0 0 24px 0;
  font-weight:700;
  color:var(--text-primary);
  font-size:1.8em;
}

#password-box input{
  font-size:1.1em;
  padding:14px 18px;
  border-radius:var(--border-radius);
  border:1px solid var(--border-color);
  background:var(--bg-primary);
  width:280px;
  margin-bottom:20px;
  color:var(--text-primary);
  transition:all 0.2s ease;
}

#password-box input:focus{
  outline:none;
  border-color:var(--primary-color);
  box-shadow:0 0 0 3px rgb(37 99 235 / 0.1);
}

#password-box input::placeholder{
  color:var(--text-muted);
}

#password-box button{
  padding:14px 32px;
  background:var(--primary-color);
  color:white;
  border:none;
  border-radius:var(--border-radius);
  cursor:pointer;
  font-size:1.1em;
  font-weight:600;
  transition:all 0.2s ease;
  box-shadow:var(--shadow-sm);
  width:100%;
}

#password-box button:hover{
  background:var(--primary-hover);
  box-shadow:var(--shadow-md);
}

#password-error{
  color:var(--danger-color);
  height:24px;
  margin-bottom:16px;
  font-weight:500;
}

@keyframes spin{
  from{transform:rotate(0deg);} to{transform:rotate(360deg);}
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.5;} }
.loading-spinner{ animation:spin 1s linear infinite; }
.pulse{ animation:pulse 2s ease-in-out infinite; }

@media (max-width:600px){
  .container{margin:20px 10px;padding:20px 16px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;}
  .op-bar{flex-direction:column;align-items:stretch;}
  .op-bar input[type="text"]{min-width:auto;}
  #password-box{margin:20px;padding:30px 25px;}
  #password-box input{width:100%;box-sizing:border-box;}
  h1{font-size:1.8em;}
}