:root{--bg:#f5f7fb;--panel:#fff;--line:#e6eaf0;--text:#18202a;--muted:#7b8492;--blue:#2563eb;--blue2:#eaf1ff;--green:#18a46b;--red:#dc3545}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg)}
.app{display:flex;height:100vh;min-width:900px}.side{width:235px;background:#fff;border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column}
.brand{font-size:20px;font-weight:750;padding:0 12px 28px}.brand span{color:var(--blue)}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;margin:3px 0;border-radius:10px;color:#5f6977;text-decoration:none;font-size:14px}.nav a.active{background:var(--blue2);color:var(--blue);font-weight:650}
.bottom{margin-top:auto}.main{flex:1;display:flex;flex-direction:column;min-width:0}.top{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px}.search{width:320px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;outline:0}.user{font-size:14px;color:#5f6977}.content{padding:28px 34px;overflow:auto}.title{font-size:25px;font-weight:750;margin-bottom:20px}
.drop{background:#fff;border:1.5px dashed #b8c2d1;border-radius:14px;padding:34px;text-align:center;transition:.15s}.drop.over{border-color:var(--blue);background:#f7faff}.cloud{font-size:38px}.drop h3{margin:12px 0 7px}.drop p{color:var(--muted);margin:0 0 18px}.btn{border:0;border-radius:9px;padding:10px 15px;cursor:pointer;font-weight:650}.primary{background:var(--blue);color:#fff}.secondary{background:#f1f4f8;color:#394250;margin-left:8px}.section{margin-top:28px}.section h3{font-size:16px;margin:0 0 12px}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 18px;margin:9px 0}.row{display:flex;align-items:center;gap:14px}.icon{font-size:24px}.grow{flex:1;min-width:0}.name{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta{font-size:12px;color:var(--muted);margin-top:5px}.bar{height:7px;background:#edf0f4;border-radius:20px;overflow:hidden;margin-top:10px}.fill{height:100%;background:var(--blue);border-radius:20px;width:0;transition:width .15s}.status{font-size:12px;color:var(--muted);min-width:115px;text-align:right}.done{color:var(--green)}.danger{color:var(--red);background:none;border:0;cursor:pointer}.files{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.file{display:flex;align-items:center;padding:13px 17px;border-bottom:1px solid var(--line);gap:13px}.file:last-child{border:0}.file .size{width:100px;text-align:right;color:var(--muted);font-size:12px}.file .actions{width:120px;text-align:right}.folder{cursor:pointer}.empty{padding:30px;text-align:center;color:var(--muted)}
.toast{position:fixed;right:24px;bottom:24px;background:#18202a;color:#fff;padding:12px 16px;border-radius:9px;display:none}
@media(max-width:1000px){.side{width:190px}.content{padding:20px}.search{width:220px}}
.total-progress{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px;
  margin-top:28px;
}

.total-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.total-title{
  font-weight:700;
  font-size:15px;
}

.total-percent{
  font-size:15px;
  font-weight:700;
  color:var(--blue);
}

.total-bar{
  height:10px;
  background:#edf0f4;
  border-radius:20px;
  overflow:hidden;
}

.total-fill{
  height:100%;
  width:0;
  background:var(--blue);
  border-radius:20px;
  transition:width .2s;
}

.total-info{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}

.total-stats{
  display:flex;
  gap:24px;
  margin-top:12px;
  flex-wrap:wrap;
}

.total-stat{
  font-size:13px;
  color:#5f6977;
}

.total-stat strong{
  color:var(--text);
}
#uploads{
height: 300px;
    overflow: auto;
}